How do I keep checkbox text from wrapping back to left margin?

  • Profile Image
    Asked on February 14, 2011 at 12:48 AM

    I have a checkbox field on my form that has accompanying text so long it wraps back to the left margin.  However, I want the wrapped text to be flush with the first word in the previous line, not wrapped all the way back to the left margin, under the checkbox.  Is there an easy way to do this?

  • Profile Image
    Answered on February 15, 2011 at 02:16 AM

    I'm not sure what you mean. This is what your form looks like right now:

    How do you want to change it?

  • Profile Image
    Answered on February 15, 2011 at 11:20 PM

    I want the word "Impact" to appear directly underneath the word "Send," not underneath the checkbox.  In other words, I want the statement to stack, not wrap.

    By the way, I'm having the worst time keeping those dashed lines (----) from showing up in my form.  I try deleting the default text in those fields, but those lines come back every time I edit the form.  Why won't they go away?

  • Profile Image
    Answered on February 16, 2011 at 04:10 AM

    Since the purpose of labels is to identify form elements, my advice is to replace those dots in each instance with text that identifies those fields (perhaps a shortened version of the text already there) so that your records will have proper headings. The labels can be hidden using the Inject Custom CSS feature in the Preferences: Open the form to edit it > Setup & Share tab > Preferences tool (See screenshots below)


    Now hide those labels with Inject Custom CSS (those ID elements can be found in the source code of your form)


    Also, I believe the word "Impact" can be lined up under "Send" using Inject Custom CSS because CSS can be used to display list items in various ways. I'll check it for you.

    UPDATE: I think this resource should be helpful but to be honest, I'm not sure how best to inject the code into the CSS to achieve the desired result. I'll do some experimentation.

  • Profile Image
    Answered on February 17, 2011 at 08:51 PM

    Thanks so much for the easy fix for the dashed lines.  I used your code and it worked great.

    As for lining up "impact" under "send," I went to the site you suggested and my brain almost exploded.  An expert coder I'm not, so I'm afraid I'm still mystified as to how to make this work without messing up the rest of the form.

    I'll spend some more time trying to puzzle it out, but in the meantime, if you manage to find an experiment of your own that works, I'll do cartwheels.

    Thanks again for your help.

  • Profile Image
    Answered on February 18, 2011 at 05:50 AM

    Get ready to do cartwheels! :)

    Edit your injected CSS like this:

    You can fine tune the top property by a pixel or two to suit your taste but beware of browser inconsistencies.

  • Profile Image
    Answered on February 18, 2011 at 11:23 PM

    This is fabulous!  My form now looks absolutely perfect, and I couldn't have done it without you.

    Thanks so much for taking the time to help me make my form look "perfect." 

    The lesson in HTML should come in handy in the future, too.

    Now you'll have to excuse me while I run off to perform a few of those cartwheels.  ;-)

  • Profile Image
    Answered on February 19, 2011 at 02:42 AM

    It was a pleasure to assist you. I used this tutorial (specifically page 4) to help me figure out what to do.

    Hopefully, you didn't injure yourself while performing the gymnastics! LOL

    Cheers :)

  • Profile Image
    Answered on February 19, 2011 at 04:30 AM

    Ha ha!  I was very careful.  ;-)

    Thanks for the tutorial link.  I'll have to check it out.

    Have a lovely weekend!

  • Profile Image
    Answered on April 21, 2015 at 01:16 AM

    Hi there,

    I need the solution to this problem but the image used for the screenshot is gone. Can the CSS be added to this thread in plain text?