What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Inject CSS required to force left label and no wrap for multiple column radio items

    Asked by markashton on April 11, 2012 at 07:32 AM

    Hi,

    - Am using radio buttons in multiple columns 

    - Using the following CSS to give multiple column layout ......

    .form-multiple-column .form-radio-item {
    width: 94px;
    color: transparent;
    font-size: 8px;

    - Works all browsers with direct link

    - Using source code and using on my own domain there is a problem .....

    In IE the radio items wrap to the next line

    In Firefox the radio items seem to ignore the align-left setting and thus the label is in top align position.

    Can you advise me as to the inject CSS that I would apply to .form-multiple-column .form-radio-item to force the alignment of the label to the left in FF and to override the wrap thing going on with IE

    Try this in all latest browsers to see what I mean ...

    http://www.workflows.co.uk/clientforms/demo.htm

     

    Thanks Regards Mark

    inject CSS label radio buttons size source
  • Profile Image
    JotForm Support

    Answered by abajan on April 11, 2012 at 10:39 AM

    I suspect this issue would be easier to resolve if a matrix was substituted for each of the radio button fields in question. The table based nature of our matrices leads me to arrive at this conclusion.

    I'll see what solutions I can devise. 

  • Profile Image

    Answered by markashton on April 11, 2012 at 10:40 AM

    Hi,

    The matrix is not a goer.

    See this thread - this is why I'm having to cook up a workaround ...

    http://www.jotform.com/answers/12249-Matrix-Survey-Tool-Limitations

     

    Thanks Regards Mark

  • Profile Image
    JotForm Support

    Answered by abajan on April 11, 2012 at 11:15 AM

    In your opening post it was stated that the CSS rule "Works in all browsers" but in Firefox 11 on Windows, the radio button rows wrapped below their labels when a clone of the form was viewed at its direct link. However, that problem was solved by increasing the form's width to 606 pixels (Setup & Embed tab > Form Width). I'll need to check the results in other OS/browser combos. To be on the safe side, increase the width to about 610 pixels for now.

    As to the various issues exhibited when the full source is embedded on your site, I'll need to investigate further.

  • Profile Image
    JotForm Support

    Answered by abajan on April 11, 2012 at 11:53 AM

    An alternative to increasing the form's width would be to include the following extra rule in the injected CSS:

    .form-multiple-column
    span + span + span + span +
    span + span + span {
    width: 88px !important;
    }

    (Change 88 to a smaller amount if necessary)

  • Profile Image

    Answered by markashton on April 11, 2012 at 12:04 PM

    Abajan,

    Your genious is obvious. That does cure the FF problem - the CSS you suggested - and I don't have to photoshop image sizes again. Thanks. What exactly is that span thing in the CSS - why repeat it like that ?

    The IE problem does not happen with the direct link. Only happens with the source code pasted into my own page. I thought it was the font-size of each individual radio buttons (the text is transparent to get the multiple columns thing that matrix tool offers) so dropped font size but still happens with the last radio button

    Many thanks for your help - if you can crack the IE one I'll make you a millionnaire ;)

  • Profile Image
    JotForm Support

    Answered by idarktech on April 11, 2012 at 06:34 PM

    @markashton,

    I don't think this fixes the styling on IE, but would be great if you'll give a try. Try injecting this code:

    .form-line {

    width: 590px !important;

    }

    .form-label-left{

    width:192px !important;

    }

    Hope this helps. Thanks.

    Update: Codes updated. :)

  • Profile Image
    JotForm Support

    Answered by abajan on April 11, 2012 at 08:10 PM

    Thanks for the compliment.

    It may take a while to figure out what is causing the IE issue but for the time being please replace the injected CSS in your web page with this, taking note of the comments.

    While checking the form in the form builder, I noticed that the Spread Columns setting for each radio button field containing four radio buttons was set to 5 instead of 4. The ones containing just three buttons were also set to 5. I don't know if this is causing the IE display issue but to be on the safe side, you'd better set them all appropriately: Those with four buttons should be set to 4 and those with three buttons should be set to 3:

    (Mark, I was about to post this when I saw an indication that someone else - my colleague - had "beat me to the punch", so to speak. Nevertheless, I still thought it wise to proceed. That way, you have two solutions at your disposal ;)

  • Profile Image

    Answered by markashton on April 12, 2012 at 05:33 AM

    Idarktech

    That's worked - genius. IE now displays correctly. Greatly appreciate the help on that. Great service

    Abajan,

    Thanks for spotting that - changed all those spread columns - don't want rogue elements like that knocking about.

    Thanks so much

  • Profile Image
    JotForm Support

    Answered by abajan on April 12, 2012 at 07:37 AM

    You're quite welcome. Kudos to idarktech for the IE fix.

    Incidentally, you had asked about the "span thing". The rule in question employs adjacent-sibling selectors to target the width of the last radio button in four columned radio button fields. The screenshot below illustrates the indispensability of tools like Firebug when it comes to quickly determining the correct selector to use in a particular rule:

    (Click image to zoom to actual size)

    (There are seven spans in the rule's selector and the last span targets the element indicated.) CSS is a pretty vast subject but they're some good, basic tutorials at MaxDesign.com.

    If you would like further clarification on how the adjacent-sibling selector works or need help with anything else JotForm related, please let us know.

  • Profile Image
    JotForm Support

    Answered by abajan on April 12, 2012 at 09:46 PM

    Incidentally, having just viewed your web page in IE8, I discovered that the labels for each radio button were still being displayed:

    That's happening because IE8 and below don't recognize a value of transparent for color. Strictly speaking, color: transparent; is not valid CSS because, according my research on the topic, transparent is only valid when applied to backgrounds. The CSS I provided via the link in my penultimate reply fixes the problem by removing color: transparent; from the following rule:

    .form-multiple-column .form-radio-item {
    width: 94px;
    color: transparent;
    font-size: 8px;
    }

    and adding this rule:

    .form-radio-item label {
    visibility: hidden;
    }

    (visibility: hidden; is perfectly valid CSS and hiding an element is, for all intents and purposes, the same thing as making it transparent.)

    I have updated my CSS to include idarktech's fixes (as noted in the comments) and as such, replacing all of your current injected CSS with mine will solve all of the problems identified thus far.

  • Profile Image

    Answered by markashton on April 13, 2012 at 06:07 AM

    @Abajan,

    Thanks for advising me on that - much appreciated and great service.

    I have a similar form with the FF problem of radio wrap here (bottom of form): 
    http://www.workflows.co.uk/clientforms/demo2.htm

    You advised the following code which sorted this:

    .form-multiple-column
    span + span + span + span + span + span + span {
    width: 88px !important;}

    Can you suggest an amend on this code that may sort this in the Firefox browser ... I seem to be lacking talent in this area

    Regards Mark

  • Profile Image
    JotForm Support

    Answered by idarktech on April 13, 2012 at 06:50 AM

    Hi Mark,

    You can try this codes:

    .form-multiple-column

    span + span + span + span{

    width: 10px !important;

    }

    #id_166, #id_167, #id_171{

    width: 590px !important;

    }

    .form-label-left{

    width:345px !important;

    }

    Hope this helps. Thanks.

  • Profile Image
    JotForm Support

    Answered by abajan on April 13, 2012 at 06:54 AM

    Yep, works for me!

  • Profile Image

    Answered by markashton on April 13, 2012 at 07:04 AM

    Thanks - that's done it. Appreciate your golddust help ;)

  • Profile Image
    JotForm Support

    Answered by abajan on April 13, 2012 at 07:06 AM

    On behalf of idarktech, you're welcome :)

  • Profile Image

    Answered by Bob on July 03, 2012 at 12:18 AM

    To prevent the wrap on long radio text inject this CSS to simply add more width.

    .form-radio-item{width:200px!important;}

     

    Just figured out this myself using Firebug.

  • Profile Image
    JotForm Support

    Answered by liyam on July 03, 2012 at 12:46 AM

    Thank you for your share of information, Bob.  It is much appreciated.

  • Profile Image

    Answered by edusa2000 on January 19, 2015 at 04:32 AM

    I cannot align these freakng option buttons with teh text. I have added all teh css on this post adn I cannot get it to work

    http://prntscr.com/5ubft4

    Please let me know

  • Profile Image
    JotForm Support

    Answered by abajan on January 19, 2015 at 08:07 AM

    @edusa2000

    As this thread is quite dated, your question has been moved to another thread (http://support.jotform.com/answers/498534) and will be dealt with in due course.


    Thanks