How can I align check boxes to their content?

  • Profile Image
    Hector
    Asked on September 26, 2011 at 04:56 PM

    Hey JotForm! :)

    Firstly, want to thank you so much sharing such a great resource!

    I am building a form so my clients can submit a friendly query about an order. I am not familiar with CSS, but I have managed to browse through other people's posts so I can understand a bit more.

    Unfortunately I am having an issue with aligning the check box or ratio box to the content. I am using image thumbnails with html code instead of text content for each option, but the check boxes are automatically aligend to the top of each thumbnail and I need them to be aligned right in the middle of each thumbnail. I just uploaded a screenshot of what I got so far. I want my checkbox list items to look like this:

    <p><img src="//dsc.sun.com/docs/jscreator/help/2update1/images/bh_checkbox_icon.gif" alt="W3Schools.com" align="middle" /><img src="//farm3.static.flickr.com/2512/4063441338_4b7cb4200b_o.jpg" alt="W3Schools.com" width="100" height="100" align="middle" /></p>

    Can you PLEASE, PLEASE come up with a code that helps me align thrhough the CSS injection?

    Thanks in advance,

  • Profile Image
    fxr
    Answered on September 26, 2011 at 06:13 PM

    Hi Hector,

     

    If you could post the direct link to your form; i will clone it, then work on a solution to your problem.

     

    Regards.

  • Profile Image
    Hecalinas
    Answered on September 26, 2011 at 07:37 PM

    Hey fxr,

    this is a direct link to my form, as you may see I have a mess with the last two options :( I need my option columns for the radio/checkboxes to be able to show the complete thumbnails I am using since they are being cut and one's over the another... any help will be apprecieated, thanks!

    http://form.jotform.com/form/12674552134

  • Profile Image
    fxr
    Answered on September 26, 2011 at 09:18 PM

    hey Hector.

    I had a good look at your issue, the most straightforward hack in my opinion is just to put the radio boxes & images into a table.

    Is this any closer to the effect you are looking for?

    http://form.jotform.com/form/12685831313

    to achieve this you would need to embed the html for the table directly with the 'free text [html]' tool in the 'Power Tools' menu.

    The code you would need to paste in is here: http://pastebin.com/Sni5Ru7a

     

    is this making sense? let me know if you have any questions.