How can I align names, one below the other, with an indent?

  • Profile Image
    solatinagroup
    Asked on March 13, 2012 at 07:35 PM

    Please see the attached screenshot. How can we perfectly align names, one below the other? I believe that if we input specific CSS it should work on most browsers but I'm not sure which CSS script to use.

     

    Thank you

  • Profile Image
    idarktech
    Answered on March 13, 2012 at 07:44 PM

    Hi there,

    I would suggest to divide that long text into two parts, simply add <br /> to bring down the text into new line and &nbsp; to add some extra space before it. Please check this screen:

    Preview: http://www.jotform.me/form/20727076382455?

    If it doesn't align well on your first text, just simply add more space &nbsp; to move your second line of text to the right side.

    Please try it out and let us know if you need further assistance. Thanks.

  • Profile Image
    solatinagroup
    Answered on March 13, 2012 at 08:05 PM

    I ended up having to add a ton of &nbsp;but I pretty much got it how I needed it to look :) 

    Thanks.

  • Profile Image
    abajan
    Answered on March 16, 2012 at 07:41 AM

    Hi again solatinagroup

    Although you were able to more or less achieve the desired result, I recall reading somewhere online that some browsers choke when too many non-breaking spaces are strung together. With this in mind, perhaps a better solution would be to employ a combination of CSS and HTML breaks, to produce the form pictured below:

    (click image to view actual form)

    The injected CSS is as follows:

    .radio-button-item-list {
    position: absolute;
    margin-left: 5px;
    line-height: 1.4;
    }

    .form-single-column span {
    margin-bottom: 5em;
    }

    .form-single-column span + span,
    .form-single-column span + span
    + span + span + span + span + span
    + span + span {
    margin-bottom: 0.7em;
    }

    .form-single-column span + span
    + span + span + span + span + span {
    margin-bottom: 2.2em;
    }


    And here's the code used in the Options box for the radio button field.

    You'll notice that the form as a whole is formatted a bit differently but the solution above would still work if your original formatting (top aligned labels for the "Which Professional" and "Question" fields and ) were to be retained.

    It should also be noted that adjacent sibling selectors (the "+" signs) are not supported in IE6 but the percentage of people who use that browser continues to dwindle. At any rate, I used BrowserStack to check how the form looked in IE6 when those selectors were employed and the field was still usable, albeit spread apart quite widely!

    If you're okay with the solution, feel free to either copy the codes or simply clone the form.

  • Profile Image
    abajan
    Answered on March 16, 2012 at 08:04 AM

    Incidentally, you won't find a radio-button-item-list class in any of the default JotForm style sheets (at least, not to my knowledge). It was created specifically for this task.

  • Profile Image
    solatinagroup
    Answered on March 16, 2012 at 05:13 PM

    Thanks for the great advice and option. I just copy and pasted both the Options Box Code and CSS and it looks exactly as you said it would. I appreciate the help.

    (and, yes...if people are still using IE6, that's a problem within itself, lol)

  • Profile Image
    Mike_T
    Answered on March 16, 2012 at 05:31 PM

    Abajan's CSS magic works great :) Please feel free to contact us if you need any further assistance.