I created a custom set up for a form and had to tweak the CSS. There is one field that is not appearing (using a negative margin) in Safari, it disappears. You should see Zip Code field right next to Email. If you look at the interior form, you will see how it looks. But it appears in all other browsers and does appear in the sidebar of the same form on the interior pages, using the same CSS tactics. Help would be appreciated.
http://www.wp-rocks.com - It is the home page form.
Instead of using negative margins, what if you try out one of these handy-dandy ready classes:
http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes
Thank you for that. That is a beautiful tool. I am trying to do that for the Email / Zip Code line and adding the gf_inline to the CSS class for both, but it is not working. I created a test form on the interior page, http://www.wp-rocks.com/mortgage-company/, at the bottom of the sidebar.
Any clue why not?
It's because of the width of the email field. I noticed you are placing custom CSS into the plugin's CSS file. You won't want to do that, because as soon as you update the plugin, your changes are going to get wiped out. You will want to place your custom CSS into your theme's stylesheet instead.
You should be able to target that individual email input and set a width, you may need to use an !important declaration depending on the selectors you currently have in place.
I have only used custom CSS in my style sheet, I have not changed the Gravity Forms style sheet. So I am not sure how that would be showing up there.
I will check my CSS for the email. Thanks.
Apologies for that, must have mixed it up with something I saw. You should be able to use this to target that email field:
[css]
#input_2_7 {
width: 10em !important;
}Rob--I appreciate the time you are taking to help me out. So I went back and changed my form on my home page to reflect using the CSS classes, but I can not get it work on there. I have added the CSS you have placed above, but changed the input to 1_7 which is the call for the "email" field. I am not sure what I am missing.
Thanks.
No problem, you will probably need to tweak the zip code field width as well. You could also try using the "small" setting on the zip code field potentially.
Try dumping what you have or what I gave above and placing:
[css]
#input_1_7 {
width: auto !important;
}Thanks Rob - I tried the auto for the width and it was only putting the email length at half, so I did change it back to 12em, and put the Zip Code set for Small. The only thing I am wondering about is justifying. I tried a few different things with CSS and I can not get it to budge right and if I increase the email width it bumps it to the second line again.
OK - got it! Change the Zip field to be "Medium" and then use gf_left_half on email and gf_right half on zip instead of gf_inline and get rid of the #input_1_7 declaration.
Thanks. My goal was to actually have the email input box longer than the zip code. I thought the inline styling would work from the example.
LOL - ok I swear this will do the trick! :) Screenshot
[css]
#field_1_8 {
margin-right: 0;
}
#input_1_8 {
width: 8.4em !important;
}Beautiful! It is now complete. Thanks so much for your help.
Awesome, glad to help out!