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.

Show text box if a checkbox is selected - best method?

  1. If you scroll down in this form under Medical Information and tick a checkbox beside Asthma and/or Diabetes, you'll see one or two text boxes pop up underneath the checkboxes. This is okay, but what I'd rather have is the text box out to the right of the associated checkbox. Is that possible? How would I go about doing that if so?

    http://www.redkitecreative.com/projects/elc/volunteer-service-learning/volunteer-application-form/

    Posted 9 years ago on Friday October 21, 2011 | Permalink
  2. I sort of like the way it works now :-) Looks nice.

    I will have one of the more experienced guys take a look at this and see if there's a way to display those fields where you want them. Might be early next week, as most of the team is travelling this weekend. Thanks for your patience.

    Posted 9 years ago on Friday October 21, 2011 | Permalink
  3. I can live with it as is, but the client would rather have it the other way. Thanks!

    Posted 9 years ago on Friday October 21, 2011 | Permalink
  4. I'll make sure someone takes a look at it when they get back to see if it's possible. Please post again on Tuesday if you don't hear from anyone, as a reminder. Thanks

    Posted 9 years ago on Friday October 21, 2011 | Permalink
  5. Hey there redkite, thanks for your patience. I believe this could get you down the right path:

    We will float the hidden text boxes and then push them up alongside, for example (and I only tested this in Chrome with the developer tools) - you could try placing the following CSS:

    [css]
    #field_4_20 {
    float: right;
    margin: -160px 0 0 0;
    }

    This will target the Asthma hidden field. You'll then want to rinse and repeat with your other fields and adjust the margin as needed to line up next to the check box. Let me know how this works for you.

    Also, as a side note, you'll want to account for these position if all or any combination of check boxes are selected. You can always make more height be styling the left-side checkboxes as well to give them a little more height in between or hide the label on the right side options so it just has the input box. Let me know if you need any more help.

    Posted 9 years ago on Tuesday October 25, 2011 | Permalink

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