Please Note: We are no longer using forums to facilitate standard support. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Check Box Alignment issues

  1. Hi,
    I'm new to Wordpress and Css. I purchased the theme Dandelion from Themeforest but did not like how basic the included contact form was. I found Gravity forms and immediately purchased it. I think I have the form part down but am having alignment problems on the radio and check boxes. From searching the forum I've determined that my problem must be inherited css traits from the theme I am using- Dandelion from themeforest. Here is my form http://www.momentumri.com/contact/
    If you could point me in the right direction to resolve this I would appreciate it.

    Also, the form that came with the themeforest theme has a nice feature in that the form fields highligt blue when they are clicked to enter information. Would something like this be possible with Gravity forms? http://themeforest.net/item/dandelion-powerful-elegant-wordpress-theme/full_screen_preview/136628

    Thanks for any help

    Posted 4 years ago on Tuesday January 11, 2011 | Permalink
  2. Yeah, the theme developer applied all sorts of blanket properties to the input element. That's typical of something you get from ThemeForest. The problem is that checkboxes and radio buttons are input elements too so they get the same rules applied as other normal text fields.

    That said, you can add this to the end of your theme's stylesheet and it should override the bad CSS.

    body .gform_wrapper input[type=checkbox],
    body .gform_wrapper input[type=radio] {height:auto}

    I noticed your button was really wide too - again inheriting from the blanket rule so this should get it back to normal

    body .gform_wrapper input[type=submit],
    body .gform_wrapper input[type=image] {width:auto}

    I didn't see the blue border you mentioned on the other form, but you could do this to add a blue border the field that's in focus

    body .gform_wrapper input[type=text]:focus,
    body .gform_wrapper input[type=email]:focus,
    body .gform_wrapper input[type=phone]:focus,
    body .gform_wrapper input[type=url]:focus,
    body .gform_wrapper input[type=password]:focus,
    body .gform_wrapper textarea:focus  {border:1px solid #0076a3}

    test screenshot: http://grab.by/8j7O

    Posted 4 years ago on Tuesday January 11, 2011 | Permalink
  3. Kevin,
    Thanks so much, that did the trick. It also help me see how the .css works. I would love to be able to just figure this stuff out on my own especially if I will continually run into these types of problems when using pre-made themes.

    Do you have any resources you would recommend for .CSS. I think I've seen something on here about people using firebug to learn- but I normally run Safari instead of Firefox. Is Firebug recommended?

    Thanks for the killer support and the great forms.

    Posted 4 years ago on Tuesday January 11, 2011 | Permalink
  4. A good resource to learn CSS is http://www.w3schools.com - they break everything down into simple pieces and give good examples. There are tons of others you can find, but that site is well organized and easy to walk through as you learn.

    You can search Amazon.com for CSS books by Dan Cederholm, Andy Budd, Cameron Moll or Andy Clarke. All of those guys have published some great CSS resources.

    I personally am a Firebug fan. I use it to debug most of the time. The other developer tools are nice for Safari/Chrome, but I simply prefer the workflow in Firebug. Any of them are good choices for inspecting your markup & CSS.

    Posted 4 years ago on Tuesday January 11, 2011 | Permalink
  5. Thanks Kevin,
    I started looking into the glowing blue border thing and it looks like it's something called -moz border radius & webkit border radius. The in focus field gets a glowing border. http://themeforest.net/item/dandelion-powerful-elegant-wordpress-theme/full_screen_preview/136628

    Here is the css code I found in the old contact form.

    input {
    	width: 300px;
    	height: 24px;
    	border: 1px solid #ccc;
    	background-color: #fff;
    	padding-top: 2px;
    	padding-bottom: 2px;
    	padding-left: 5px;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }
    
    textarea {
    	width: 300px;
    	height: 150px;
    	padding-top: 0px;
    	font-family: Arial;
    	font-size: 13px;
    	padding-top: 8px;
    	padding-bottom: 8px;
    	border: 1px solid #ccc;
    	padding-left: 5px;
    	-moz-border-radius: 3px;
    	-webkit-border-radius: 3px;
    	border-radius: 3px;
    }

    does it seem like I could add the moz part of that into the code you just gave me? I'll definitely give w3schools a shot before I try doing another site.
    Thanks,
    Fred

    Posted 4 years ago on Tuesday January 11, 2011 | Permalink
  6. The border-radius property just rounds the corners of the elements. What you're talking about is a "box shadow" which you would add like this.

    body .gform_wrapper input[type=text]:focus,
    body .gform_wrapper input[type=email]:focus,
    body .gform_wrapper input[type=phone]:focus,
    body .gform_wrapper input[type=url]:focus,
    body .gform_wrapper input[type=password]:focus,
    body .gform_wrapper textarea:focus  {border:1px solid #0076a3; -moz-box-shadow: 0px 0px 5px #0076a3; -webkit-box-shadow: 0px 0px 5px #0076a3; box-shadow: 0px 0px 5px #0076a3}

    screenshot: http://grab.by/8kaw

    Note: This doesn't work in IE browsers, but is a nice effect in browsers that actually try to support web standards.

    Here's a little more info on the box-shadow property. The CSS Tricks site is also a good resource for CSS tutorials and snippets as well.

    http://css-tricks.com/snippets/css/css-box-shadow/

    Posted 4 years ago on Tuesday January 11, 2011 | Permalink
  7. Kevin,
    The box shadow is exactly what I'm going for but it is not displaying properly just yet on my form. The "first name" field shadow gets cut off on the left and top, the "last name" field shadow gets cut off on the top only. The "Questions,Comments" field, which was a standard paragraph field looks perfect. I guess I don't fully understand the CSS you gave me. I thought it would target any input fields that were in focus the same way. I've been looking at the Gravity Form CSS Guide to try and figure out what I need to target but I haven't been able to figure it out.

    Another small issue is that I would like some small amount of padding to the left of the entered text. I tried adding a padding-left: 5px; to the
    body .gform_wrapper textarea line you gave me and it worked- except when you tab to the next field it goes back to no padding. I am assuming I need to add padding elsewhere, but not to the radio button or check boxes input elements.

    My wife (who is also the client on this project) thinks I am insane to even care about this stuff. I can really see implementing gravity forms on the other two sites I've built using Wordpress themes so I figure I may as well try and learn what the hell I am doing.

    I really appreciate all the help you have given me so far. I realize I really need to sit down and spend some time with basic CSS to save myself alot of headache in the future.
    Thanks,
    Fred

    Posted 4 years ago on Wednesday January 12, 2011 | Permalink
  8. Fred, sorry for the delay getting back to you, I've been traveling and had some connectivity issues for the past 2 days. All seems well now so I've looked at your form/css and see a couple of things offhand.

    First, you've applied the padding rule to just the "focus" state so when you're not focusing on the field, the padding goes back to 0. You can remove that and just do this.

    body .gform_wrapper input[type=text],
    body .gform_wrapper input[type=email],
    body .gform_wrapper input[type=phone],
    body .gform_wrapper input[type=url],
    body .gform_wrapper input[type=password],
    body .gform_wrapper textarea {padding-left:5px;}

    That will apply to all of the states of the field.

    Next, I see your box-shadow isn't working because your syntax is wrong. There are only 3 numerical values to specify and you have 4 in your rule. These aren't specified the same way as padding/margins are (top - right - bottom - left). If you refer back to my CSS snippet in the previous post, you'll see the proper way to implement the style.

    As mentioned before, you can find out more about the box-shadow property and how it's applied here.

    http://css-tricks.com/snippets/css/css-box-shadow/

    Once you've got that all working again, let me know if you still have issues and we'll take it from there.

    Posted 4 years ago on Friday January 14, 2011 | Permalink
  9. Hi Kevin,
    Thanks for the padding tip! I had actually tried that but I must not have typed it in correctly.

    As far as the box- shadow I had read a bunch of info/tricks and from what I could tell the 4th value in the rule was actually the spread radius of the shadow- based on this
    https://developer.mozilla.org/en/css/-moz-box-shadow

    I set it back to your specs and the top info fields still get cut off on the top and the left. The "Questions, Comments" field however is great. When you get a chance if you could help me figure this out maybe we could close this topic LOL.
    Fred

    Posted 4 years ago on Friday January 14, 2011 | Permalink
  10. Fred, in looking back at the available properties, you are 100% correct about specifying the spread. (Doh! *red face*) My apologies. I'm not sure why it wasn't working before but I've tested it with a couple of other style tweaks and it works fine.

    screenshot: http://grab.by/8o7u

    try adding this to your stylesheet. You can replace the box-shadow rule with this one as well.

    body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container,
    body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex {overflow: visible}
    
    body .gform_wrapper input[type=text]:focus,
    body .gform_wrapper input[type=email]:focus,
    body .gform_wrapper input[type=phone]:focus,
    body .gform_wrapper input[type=url]:focus,
    body .gform_wrapper input[type=password]:focus,
    body .gform_wrapper textarea:focus  {border:1px solid #0076a3; -moz-box-shadow: 0 0 3px 2px #0076a3; -webkit-box-shadow: 0 0 3px 2px #0076a3; box-shadow: 0 0 3px 2px #0076a3}

    I hope that gets it for you

    Posted 4 years ago on Saturday January 15, 2011 | Permalink
  11. Kevin,
    Case Closed!!! Thanks so much. I just need to study this to really understand it. It seems easy when you see the proper code. I think I need to try and understand the structure of the theme better to be able to see how Gravity Forms interacts. Thanks Again. I'll def be using gravity forms on my next sites.
    Fred

    Posted 4 years ago on Sunday January 16, 2011 | Permalink
  12. Great Fred. Thanks for the update.

    Posted 4 years ago on Sunday January 16, 2011 | Permalink

This topic has been resolved and has been closed to new replies.

Support Tickets

Open A New Support Ticket
 Open A New Priority Support Ticket *

* Developer license holders only