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.

Position checkbox below image

  1. Good morning all,

    I have a top-label form containing a checkbox field with three images, all sized 180x160px, and I'm distributing the images with the "gf_list_3col" ready class. To display both the image and description, I'm using HTML in the field labels like so:

    Field1 Label<br /><img src="" alt="Field1 Label" title="Field1 Label">

    First, I'm wondering if there's a better way to display the field description than just adding it before the image string? I noticed a similar post on the forum yesterday, but it didn't provide a solution (something about pulling the descrition from the alt title).

    Second, I'd like to center the checkboxes and labels below the corresponding images, but unsure how to style.

    BTW - the form I'm using is id #11, the checkbox field is #11_15 and the individual fields are 15_1, 15_2 and 15_3. Thanks in advance for any tips to get this working!

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink
  2. Can you post a link to this form for me.

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink
  3. Sure. http://www.acostainc.com/product-list/new-product-inquiry/. This is still a work in progress so more fields will be added/enhanced once I get past this hurdle!

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink
  4. What if you place your image src first, then your break tag and then label. Then place a margin-top on the choice input: screenshot

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink
  5. Thanks for the suggestion, Rob. My only issue with that approach is that the checkbox and label are not side-by-side. Is it possibel to have the image above and label with checkbox centered below?

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink
  6. I don't know if there is going to be an ideal way for you to achieve this. Maybe you could try placing the images as background images on each individual li via CSS and then try positioning the input and label?

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink
  7. Happy to give it a try. I know how to target a field list with CSS (in this case 11_15), but not the specific li (like 15_1). Can you send an example? Also, where would I define the li class for each element?

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink
  8. If you use chrome dev tools or firebug you should be able to inspect the element: screenshot

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink
  9. I've finally got everything styled as desired (minus a few minor tweaks). Thanks for your assistance.

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink
  10. Nice dude, looks great. Glad to help out!

    Posted 7 years ago on Wednesday June 6, 2012 | Permalink

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