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

    Change number of columns of Checkboxes for each device?

    Asked by meldominguezx on February 27, 2015 at 07:50 PM

    Hello. I have forms that I have created that have 2 columns. They work fine for desktop, tablet and landscape. But when in portrait the 2 columns get overlapped. So what I would like to do is that when the form is seen on portrait the form would change from 2 columns to 1 column. Is this possible and how??

    Thanks!!

    Page URL:
    http://form.jotform.co/form/50417769070861

    landscape responsive column
  • Profile Image
    JotForm Support

    Answered by jonathan on February 27, 2015 at 08:28 PM

    I suggest you try first setting the column number to the appropriate maximum needed.

    Example, set it at least to 3 column this way it can expand if needed(respond) up to 3 column.

    Then, make sure you setup the form to be mobile responsive as described on the user guide

    user guide: -How-to-make-forms-Mobile-Responsive

     

    Hope this help. Let us know how if you need further assistance.

    Thanks.

     

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on February 27, 2015 at 09:04 PM

    I see that you were only referring to the Checkboxes option and not the overall responsiveness of the form.

    So what I would like to do is that when the form is seen on portrait the form would change from 2 columns to 1 column. Is this possible and how??

    There is no means to dynamically make the number of column set to interchange using the Form Designer only. The reason I suggested to set the max number of column needed is for the overall responsiveness of the form.

    Example, if you change the orientation of the form (landscape to portrait) on mobile device, it should be able to respond appropriately and will fit the necessary fields in column allowed formation.

    BUT this option will only work on the Checkboxes columns that you have on the form http://www.jotform.co/form/50417769070861 by adjusting manually the width of the Checkboxes options label names.

    The way I see, some of the Checkbox items lables were just too long the reason the overlap each other when in responsive mode.

     

    Hope this help. Let us know if there is more we can assist you with.

    Thanks.

     

     

     

     

     

  • Profile Image

    Answered by meldominguezx on February 27, 2015 at 11:04 PM

    I tried changing the width the columns width in the css editor but I haven't been able to make them to not overlap. I don't know what I'm doing wrong or what I have to edit. could you help me? I don't understand how to make it work.

    Thanks

  • Profile Image

    Answered by Ben on February 28, 2015 at 05:15 AM

    Instead of changing the width manually I would actually suggest making the browser do the job for you.

    When doing this, it will show each entry properly on different mobile sizes, unlike manually setting the width and will show the options in the nice manner.

    To do this, please add this CSS code:

    #cid_17 span.form-checkbox-item > label {
        white-space: pre-line;
    }

    Once you do you will see the options looking like this:

    Do let us know if that would work for you.

  • Profile Image

    Answered by meldominguezx on February 28, 2015 at 11:48 AM

    This is exactly what I needed!!! It worked perfect!! Thank you so much!