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

    I am using the Select ALL widget and have a couple questions.

    Asked by kdewitt on July 14, 2015 at 04:09 PM

    1.  The column width of the option is very narrow.  So narrow it is almost non functional.

    2.  I lose the "Other" option.

     

    Suggestion for future upgrades.  Have a Select All function as easy as you "other" option.

    Page URL:
    http://www.jotform.us/form/51904451546152

    other option customfieldname select all CSS Custom CSS Select all widget
  • Profile Image
    JotForm Support

    Answered by jonathan on July 14, 2015 at 07:59 PM

     

    1.  The column width of the option is very narrow.  So narrow it is almost non functional.

    Please add this CSS code into your jotform http://www.jotform.com/51904451546152

    #customFieldFrame_44,#customFieldFrame_45 {width:100% !important;

    }

     

     

    user guide: -How-to-Inject-Custom-CSS-Codes

     

     

    2.  I lose the "Other" option.

    There is no "other" option for the Select All Widget, so you must be referring to the regular Checkbox field with the Other option ON.

    Can you describe more what you meant you lose the "Other" option.

     

    Thanks.

  • Profile Image

    Answered by kdewitt on July 15, 2015 at 09:00 AM

    Ok,  I tried adding the

    #customFieldFrame_44,#customFieldFrame_45 {width:100% !important;}

    into the CSS frame and nothing changes.  I see in the forum that others have also had the same issue with nothing happening.

     

    Please advise.  I have followed the User Guide.  Remember this is all from the SELECT ALL widget.

  • Profile Image
    JotForm Support

    Answered by Boris on July 15, 2015 at 09:54 AM

    Could you please post a screenshot of the issue, so that we can better understand where it is being cut off and what you are seeing?

    You can add images to the support forum by following this post by our colleague: http://www.jotform.com/answers/277033

    When I look at your form on my desktop, the field is correctly visible and I have no problems seeing the options of the Select All widget.

    While attaching the image that shows this problem, please let us know what device or browser you are using when the widget is being overly narrow. Thank you. We will be happy to help.

  • Profile Image

    Answered by kdewitt on July 15, 2015 at 10:20 AM

    Ok, If you look at the column width from a normal checkbox and compare it to a Select All checkbox, then you will see it is much wider, more pleasing to the eye, and for those options that I have not added that have a lot of text would be very inefficient.

    This screen shot shows the bottom of a normal checkbox and the top of a Select All.

  • Profile Image
    JotForm Support

    Answered by Boris on July 15, 2015 at 10:44 AM

    I believe I understand what you wish to achieve. It seems that you want the checkboxes to start from the left, as regular checkboxes do, so that the text has a lot more space:

    This leaves a lot more space for the labels on the right, so they are much longer. We can achieve this by adding the following CSS after the code my colleague has already provided before:

    #label_44, #label_45 {
    float: none;
    display: block;
    }
    #cid_44, #cid_45 {
    display: block !important;
    }

    I hope this helps. Please let us know if you need further assistance, we will be happy to help.

  • Profile Image

    Answered by kdewitt on July 15, 2015 at 12:09 PM

    I have the following in CSS:

    #customFieldFrame_44,#customFieldFrame_45 {width:100% !important;}#label_44, #label_45 {
    float: none;display: block;}#cid_44, #cid_45 {
    display: block !important;}

    Note:  Your reply truncates lines, so I don't know to take out spaces, or how to take your code.  You say to put it after are there any spaces or after on the next line. 

     

    Do I put it in as your response shows with the code extending to separate lines?

     

    We are definitely having some communication issues here. 

  • Profile Image

    Answered by kdewitt on July 15, 2015 at 12:29 PM

    Got it.  Thanks

  • Profile Image

    Answered by Ben on July 15, 2015 at 02:01 PM

    I am sorry for the layer of confusion with the CSS, but I am glad to hear that the code given by my colleague Boris did the trick :)

    In regards to your question, you can add it any way you like, but it is best to add it after all other code. This means that all that you can do is add a space and paste the CSS code, which can be in a single line, have lots of spaces in it or even be spread out to several lines.

    This is possible because CSS ignores white space - there are some places where it is not - for example with "quotes", but if you just copy the code and paste it, it will work :)

    Do let us know if you have any further questions or issues and we would be happy to assist.