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.

Floating Radio Buttons and CSS Customization

  1. Hi thanks for reading!

    You can see what I'm working on here:

    http://athleticode.com/forms/crl-entry-form/

    You'll need to check the "Whole Body" option under "Test Taken" so all the fields will show up.

    I basically want to put these Radio Buttons into Columns under each Section Break, so the form is not so long. Basically so the Whole Radio Button field is floated to the left.

    I also have a weird issue going on with the Date icon. How can I get that to line up vertically with then entry field?

    Posted 14 years ago on Wednesday October 13, 2010 | Permalink
  2. If you look at your images.css file, line 7 has this rule.

    .entry-content img {margin:0 0 18px;}

    Thats affecting your date picker image as well, you'll need to override it with something like this

    .entry-content .gform_wrapper img.ui-datepicker-trigger {margin:0!important}

    As far as the radio lists, you'll need to view the source, note the id's of the list items that contain the fields, then apply some width, height and float rules to those so they will lay out as columns. You'll want to float the first ones, but leave the float off the last one so it clears the items below it.

    .gform_wrapper li#field_2_6,
    .gform_wrapper li#field_2_7,
    .gform_wrapper li#field_2_8,
    .gform_wrapper li#field_2_9 {width:25%; height:160px;}
    
    .gform_wrapper li#field_2_6,
    .gform_wrapper li#field_2_7,
    .gform_wrapper li#field_2_8 {float:left}

    test screenshot

    Just apply that same principle to the other lists you need aligned the same and you're good to go.

    Note: I would do 25% width for all the lists, even those that don't have 4 columns. That way everything will still visually align vertically.

    Posted 14 years ago on Thursday October 14, 2010 | Permalink
  3. Brilliant Thanks Kevin!

    Posted 14 years ago on Thursday October 14, 2010 | Permalink
  4. My pleasure. Form looks good btw. Nicely done.

    Posted 14 years ago on Thursday October 14, 2010 | Permalink