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

    Spread columns: 'allow other' field

    Asked by emilevdende on August 22, 2014 at 10:39 AM

    Hi,

    When I spread a list of 3 radiobuttons with 'allow other' enabled, over 4 columns, the 'other' field is displayed in the first column while it should be in the 4th column.

    Using the css class mentioned here (http://www.jotform.com/answers/329681-Spread-Columns-make-the-options-width-wider), I increased the size of the columns, but that does not place the 'other' option to the 4th column.

     

    Is there a way to make sure that these 4 options (so including other) are displayed in 1 row/ 4 columns?

    (changing it to 5 columns does not help).

    Thanks in advance,

    Emile

    Page URL:
    http://form.jotformpro.com/form/42262819337963

    JotForm size www thanks
  • Profile Image
    JotForm Support

    Answered by KadeJM on August 22, 2014 at 11:26 AM

    So you are seeking to make your form 4 columns?

    As far as I know I think this should be possible. It isn't working because the css has to be more directed at the inputs themselves. Please allow me a little bit of time to try to work this out and I will get back to you later on as soon as I can.

  • Profile Image
    JotForm Support

    Answered by KadeJM on August 22, 2014 at 12:17 PM

    Well, I managed to get it all on one line. However, a downside to it is that this force the checkboxes into a reversed order.

    I'm trying to figure out a way to fix that problem and flip it back left to right, but at the moment it's being a bit finicky for me. If I find a way to fix it i'll update you here asap. 

    Here's what it is at the moment - http://form.jotform.us/form/42334739485160 

     

  • Profile Image

    Answered by emilevdende on September 10, 2014 at 02:59 PM

    Hi KadeJM,

     

    Did you find a solution yet?

    The same thing is happening with radiobuttons, 5 options (no allow other) spread over 5 columns when I use it on my iPad in portrait mode. The width of my screen is 1500+px, so it should be able to display all the options in 1 single, 5 columned, row...

    See:

    http://form.jotformpro.com/form/42262819337963

     

    It would be a great thing if we can fix this!

    Thanks in advance!

  • Profile Image

    Answered by emilevdende on September 10, 2014 at 03:03 PM

    Hi KadeJM,

     

    Did you find a solution yet?

    The same thing is happening with radiobuttons, 5 options (no allow other) spread over 5 columns when I use it on my iPad in portrait mode. The width of my screen is 1500+px, so it should be able to display all the options in 1 single, 5 columned, row...

    See:

    http://form.jotformpro.com/form/42262819337963

     

    It would be a great thing if we can fix this!

    Thanks in advance!

  • Profile Image
    JotForm Support

    Answered by david on September 10, 2014 at 04:44 PM

    Hi,

    The mobile formatting is much different than the desktop formatting.  Adding this code will force all browsers mobile or otherwise to have a width of 855px which is the same as your form.  Mind you, this does override the mobile formatting.  Your form will be the same width no matter the device.

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    width: 320px !important;

    }

    .form-line {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    padding-left: 3px !important;

    }

    img.form-image {

    max-width: 100% !important;

    height: auto !important;

    }

    #id_1.form-line {

    padding-left: 36px !important;

    padding-right: 36px !important;

    }

    }

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image

    Answered by BaneD on September 10, 2014 at 05:21 PM

    Hi

    Is there a way to make sure that these 4 options (so including other) are displayed in 1 row/ 4 columns?

    If I understood exactly what you wanted to accomplish then that is actually very simple and will require just 1 line to be added to your CSS.

    To make sure that we are on the same page, do check this form - it is a clone of your form with this CSS code added to it.

    This is the form: http://form.jotformeu.com/form/42526414809355

    Now this is the CSS code that was added to it:

    span.form-checkbox-item[style="clear:left"] { clear: none !important; }

    Now to add that CSS right above all you have to do is follow these simple steps here http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    PS: This code will not change anything to your form width, so you have full control over it ;)

    I hope that this helps you to accomplish what you were after. Do let me know how that works for you :)

  • Profile Image

    Answered by emilevdende on September 11, 2014 at 02:13 PM

    Hi David and BaneD,

    Thanks both for your suggestions!

    @BaneD, that CSS works perfectly, thanks!!

    Would you understand why the input field drops under the checkbox when I apply the theme I always use for my forms (XXL form)? (and possibly a way to fix it?)

    You can see it here:

    http://form.jotformpro.com/form/42262819337963

     

    I tried to do inject the same CSS with the form-radio-item class, but that didn't work unfortunately. The thing I'm after is displaying 5 radio buttons in 5 columns, in 1 row. On the form you see that they display in 5 columns, but as soon as I open the form on an iPad in portrait mode, the 5th option is moved to the first column. I use an iPad 3 (so 1500+px wide in portrait), so it should be wide enough...any ideas on that?

     

    Thanks again!!

    Cheers,

    Emile

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 11, 2014 at 04:03 PM

    I do deeply apologize about this matter and not responding back beforehand as I was experiencing some trouble shifting the checkboxes into a reversed order and I am sorry about that.

    I think it's doing that because it getting compressed by the form size so because of this that's why it is shifting down below the checkbox input.

    Anyway, I noticed if you enable the field's "shrinking" feature then this will move your input back into the appropriate place next to your checkbox.

    Screenshot:

     

  • Profile Image

    Answered by BaneD on September 11, 2014 at 04:03 PM

    Hi Emile

    @BaneD, that CSS works perfectly, thanks!!

    Great to hear that :)

    Would you understand why the input field drops under the checkbox when I apply the theme I always use for my forms (XXL form)? (and possibly a way to fix it?)

    I see and I must say that you will like to know that I can fix it for you ;)

    Right of the boat it seems to be a width issue and when checked, it seems that I will need to add 1 more line to accommodate that as well :)

    This is now the full CSS


    .form-all, .form-section, .form-section-closed {width:100%;}
    span.form-checkbox-item[style="clear:left"] { clear: none !important; width:180px; }

    I only added the bold section to it.

    Here is the form for you to clone or check out before injecting CSS.http://form.jotformeu.com/form/42536675740359

    Hope you like it :)

  • Profile Image

    Answered by emilevdende on September 11, 2014 at 10:05 PM

    Hi BaneD,

    Thanks again for your efforts!

    This almost does the trick...the weird thing is though that when the form is previewed with this CSS injected, the other field and checkbox are not aligned vertically with the other checkboxes (the 'other field' is positioned a couple of px lower). However in the form designer it does look good...

     

    Form designer:

     

    Form preview: (http://form.jotformpro.com/form/42262819337963)

     

    And, do you know a solution for the 5 columns radio button issue I mention above?

    Thanks!

    Cheers,

    Emile

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 12, 2014 at 01:49 AM

    Hello Emile,

    Please inject the following custom css code in your form and see if that solves your problem:

    span.form-checkbox-item[style="clear:left"] {

    clear: none !important;

    width: 190px;

    margin-top: -2px;

    }

    On your question related to 5 column radio button: I did check your form and it seems reducing the width of your radio button items will solve the problem. Please inject the following custom css code in your form:

    span.form-radio-item {

    width: 120px !important;

    }

    Please take a look at the following cloned form and see if this works as expected:  http://form.jotformpro.com/form/42540856315959? 

    Thank you!

  • Profile Image

    Answered by emilevdende on September 12, 2014 at 09:58 PM

    Hi Ashwin_d,

     

    Wow, nice work, thanks! Totally working as desired.

     

    Thanks a lot all!

    Cheers,

    Emile

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on September 13, 2014 at 03:09 AM

    Hello Emile,

    On behalf of all my colleagues, You are welcome.

    Do get back to us if you have any questions.

    Thank you!