Not signed in (Sign In)

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

Suggestions: Text will not wrap

Bottom of Page

1 to 7 of 7

  1.  
    • CommentAuthorkristie
    • CommentTimeOct 13th 2011
     
    Hi the text in my check box question won't wrap around. Its one giant long sentence that goes outside the border of the page.

    My survey looks awesome except for this one minor issue, any suggestions.

    I have each sentence as selected one sentence each per line, when I check of them to be continuous the problem still occurs

    Thanks and help appreciated I am new

    Kristie
  2.  
    What is the page link?
    • CommentAuthordbuschho
    • CommentTimeOct 13th 2011 edited
     
    Hello,

    This is expected behavior, as wrapping for long radio / checkbox buttons doesn't work well in older browsers.

    I think can I dig you up some CSS to override the behavior, but there are two issues:
    1. In older browser it may render poorly or be unreadable.
    2. Respondents generally don't read past the first few words of a choice. If you need to explain something to a respondent, it's frequently best to use a HTML section to detail the different options with lists, italics, bolding, etc. then place shorter option labels for the actual choice.

    Happy to help further,
    Drew
    FormAssembly.com Support

    PS. Like Martin said, a link to your form would help a lot in giving you advice here.
    • CommentAuthorkristie
    • CommentTimeOct 13th 2011
     
    Thanks for your advice I have cut down the text but still having problems on this page. This is a very detailed survey to collect details for writing a resume.

    http://app.formassembly.com/form-builder3.4.2/?data[Form][id]=216563&template=0#
    • CommentAuthordbuschho
    • CommentTimeOct 14th 2011
     
    Hello Kristie,

    If you're sure you need the long choices, and you don't mind that it may break in older browsers, try placing this code into your custom code block:

    <![if !IE]>
    <style>
    .wForm form .oneChoice {
    white-space: normal !important;
    /* keeps checkbox/radio and label together */
    }

    .wForm form .oneChoice label {
    white-space: normal !important; /* allows label to wrap if needed (ticket
    #242) */
    display: initial !important;
    }

    </style>
    <![endif]>

    <!--[if IE]>
    <style>
    label.postField{
    display: normal !important;
    white-space: wrap !important;
    }
    </style>
    <![endif]-->

    Happy to help,
    Drew
    FormAssembly.com Support
    • CommentAuthortlatech
    • CommentTimeFeb 28th 2012
     
    Thanks for this, Drew! I was having the same problem as Kristie and this custom code, pasted into the Custom Code space above the already-existing code there, solved the problem I was having with long check-box options that wouldn't wrap in Google Chrome.

    However, the code did introduce a more minor problem in Firefox, where the long check-box options had been displaying just fine... Now, any of those long options (i.e., any text so long that it needs to wrap) show up *below* the check-box instead of beside it (as they used to before the new CSS was introduced). Do you have any more CSS magic that might revert the behaviour to what it was before when Firefox is used?

    Edward
    • CommentAuthordbuschho
    • CommentTimeFeb 29th 2012
     
    Hello,

    Not to my knowledge. Unfortunately to get the wrapping to work in older browsers, you have to break the wrapping in newer browsers. One thing you might investigate would be to improve on the CSS browser detection in the CSS above ... but that's never been handled that well by different browsers, so it may be a losing battle.

    Drew

1 to 7 of 7

  1.