PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. 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.

cannot get radio button labels to align with the buttons

  1. equalizer
    Member

    Even before I added CSS to put some of the fields on the same lines, it had the same problem. I am using the Headway theme. I cannot find anywhere in the base css where it is causing the li elements to be styled in a way that would cause this. I've spent an hour trying to find a fix and nothing seems to work. Right now I am using the following to force the two items on the same line (again it still doesn't align even if I take out all form css that I've added):

    .gform_wrapper ul.gfield_radio li {
        float: left;
        padding: 0px;
        margin: 0px 10px;
        border: 0px;
    }

    The link to my form is:
    http://www.facesinprison.com/list-inmate/

    It's the Gender selection, second from input from the top.

    Thanks!

    Posted 9 years ago on Sunday November 7, 2010 | Permalink
  2. The problem is that the headway css is setting a "clear:both" rule on all inputs, textareas and labels. (headway.css line 361)

    You can add this to your custom css and it should fix you up.

    body .gform_wrapper .gfield_checkbox li label, body .gform_wrapper .gfield_radio li label {clear:none!important}

    test screenshot

    Posted 9 years ago on Sunday November 7, 2010 | Permalink
  3. equalizer
    Member

    That's terrific, it did indeed fix it right up! No way I would have figured that one out, even though I knew it had something to do with formatting the label, I just had no idea how to reference it and completely missed that it was the clear attribute causing it. I appreciate you getting back to me so quickly I feel much better now. ;)

    Posted 9 years ago on Sunday November 7, 2010 | Permalink
  4. Wonderful. I'm happy you're up and running. Have a great afternoon.

    Posted 9 years ago on Sunday November 7, 2010 | Permalink
  5. I tried that code but it didn't work. Any ideas?

    http://www.yobooks.ca/estimate/

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  6. It worked okay in my test. screenshot - it could use a spacing tweak but it's mostly done.

    Where did you put the rule? I don't see it in your custom.css file

    http://www.yobooks.ca/wp-content/themes/headway-202/custom.css?1289234609

    That's where you need to place it - I'm sure Headway has a place in the admin to add the custom CSS

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  7. I tried to add it to the custom css box in the Headway Leaf. Thanks for the tip.

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  8. I really don't know much CSS. I bought Headway and Gravity Forms hoping I could easily build a form without getting into CSS. Thanks for the help.

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  9. I'm not super familiar with the Headway admin, especially the newest version, but there should be a place to add custom CSS via the admin. Once you find that, just copy the snippet above and paste it in there. Save the settings and you should see the difference.

    If you still need some help tweaking things, I'll be happy to help out. We'll try to keep it as easy for you as possible.

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  10. Thanks man. I'm not really a girl. I am building this site for her and she purchased the plugin so I had to log in with her info. It just seems weird when every post I make shows her picture.

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  11. LOL. Okay. No Worries. If you do need some guidance on the Headway theme, don't hesitate to contact those guys. They're super great guys and very helpful too. You'll be in good hands.

    As I mentioned before, just let me know if you get stuck with the styling and I'll be happy to help out.

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  12. I got the code in but it's still not exactly right.

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  13. Okay, add this rule to your custom CSS as well. It should fix the alignment issues by removing the bottom margin the default Headway styles are throwing in there.

    body .gform_wrapper .gfield_checkbox li input[type=checkbox],
    body .gform_wrapper .gfield_radio li input[type=radio] {margin-bottom:0!important}
    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  14. That worked perfectly. Thank you sir. You are the man.

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  15. Great. Glad that helped out. Thanks for the update.

    Posted 9 years ago on Thursday November 11, 2010 | Permalink
  16. I'm having similar problems with my form: http://dev.cinziafashions.com/consultations/
    I tried both of these in my custom css file but the radio buttons are still mis-aligning with the labels. Plus when I use the 2 column CSS read classes, the 2 columns don't align ... Any clue why?

    Thanks!

    Posted 7 years ago on Monday September 17, 2012 | Permalink
  17. I could not get this site to come up today to take a look at it. From isup.me:

    It's not just you! http://dev.cinziafashions.com looks down from here.

    Posted 7 years ago on Tuesday September 18, 2012 | Permalink
  18. It's up, it was a little slow earlier - try again now... and make sure you look at the "consultations" page where the form is. Since it's on a dev server, you may have to tell it to proceed to view it... Thanks!

    Posted 7 years ago on Tuesday September 18, 2012 | Permalink
  19. I was able to load it one time but when attempting to reload it, I got a 404 error. Can you please let us know when it is accessible on a more consistent basis?

    Regarding the radio button alignment, I was able to see that it's a background image being position there. It probably needs to be adjusted, or maybe do something with the vertical alignment of the label. However, I could not load and reload the page reliably enough to test the fix for this.

    If you can make the site more available to us, we will be able to check it out for you.

    Posted 7 years ago on Wednesday September 19, 2012 | Permalink
  20. I'm able to see the site just fine - could you please try again... I just can't figure out where there is a background image or alignment issue in my CSS and need help. Thanks!

    Posted 7 years ago on Thursday September 20, 2012 | Permalink
  21. This should help out (place in your theme's stylesheet):

    [css]
    .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {
    display: inline-block;
    }
    Posted 7 years ago on Friday September 21, 2012 | Permalink
  22. Thank you Rob, that worked! Now if I can only get my 2nd column to align properly... it's being pushed down below and to the right one the first column.
    http://dev.cinziafashions.com/consultations/

    Posted 7 years ago on Friday September 21, 2012 | Permalink
  23. To use the left/right half ready classes you need to alter them on your form. So the first form field will have gf_left_half then the next field in your form will have gf_right_half and you keep alternating.

    Posted 7 years ago on Friday September 21, 2012 | Permalink
  24. Wow thanks Rob!! I had no idea... :)

    Amie

    Posted 7 years ago on Friday September 21, 2012 | Permalink

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