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

    Some text on the Button Checkboxes widget is not formatting correctly

    Asked by Benflips on July 07, 2016 at 10:37 PM
    A little below this, I've put some large text elements into a Button Checkboxes widget - label is "Please tell us who you have consulted so far". Can you tel me what I've done wrong, because it is not formatting the correct text on the correct buttons.
    button checkboxes width text options
  • Profile Image
    JotForm Support

    Answered by Kiran on July 08, 2016 at 03:34 AM

    I see that the width of buttons in the widget is set to 700px which I think it is causing the issue. Please try reducing the width of the buttons to 150px or 200px and set the number of buttons to be displayed in a row with 4 or 5. Also, please remove the comma in the button (A friend, family member or colleague who has experienced something similar) which is also causing some issue to display the buttons properly.

    Is it possible to change the position of the long text buttons or reduce it in any way? Since the width text length is not the same the text is pulled down behind the second-row buttons. If it is possible to change the position of the long text buttons, we might try to increase the width of the buttons by injecting the Custom CSS to the widget.

    If you need any further assistance, please let us know. We will be happy to assist.

  • Profile Image

    Answered by Benflips on July 09, 2016 at 10:46 AM
    Hi. I've used part of your advice and mostly fixed the issue.
    My reasoning for making such wide buttons was that 3 of the buttons have a
    huge amount of text.
    Is it possible to make just those three buttons effectively 'higher'
    compared with the others, and wrap the text so the buttons don't have to be
    so wide?
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on July 09, 2016 at 03:07 PM

    Just a suggestion, I believe it would be better if you make all the buttons having the same sizes so it will be aligned properly as shown on the image below.

     

    To achieve that, you need to set the "Buttons per Row" option of the widget to "5" and the width of the buttons to 150.

    Then add the CSS codes below to the custom CSS tab of the widget.

    .checkboxes input + label{

    height:120px;

    line-height: 20px;

    display: table-cell;

    vertical-align: middle;

    }

    .rowButtonCheckbox {

        height: 120px;

    }

    Also, to have commas in the option's text you can use the HTML Number for comma (,)

    (Please see screencast below)

    I hope this helps. Let us know if you have questions with any of the instructions above. 

    Thank you.

  • Profile Image

    Answered by Benflips on July 09, 2016 at 07:46 PM
    At this stage I don't want this suggestion - at least until I see the
    outcome of my request - If you look at options 2 & 3 in particular, I would
    like the text in parentheses to be on a second line underneath the title of
    "Limited Scope" Chiropactor or "Wellness Chiropractor"
    If these titles could also be bold that would be great too
    ...
  • Profile Image
    JotForm Support

    Answered by BDAVID on July 09, 2016 at 10:48 PM

    If you want the text options from the Button Checkboxes widget to be bold, inject the following code:

    .checkboxes input + label{

       font-weight: bold;

    }

    Let us know if you need more help.

  • Profile Image

    Answered by Benflips on July 09, 2016 at 11:46 PM
    Is it possible for only a couple of the buttons to have bold text?
    Indeed, is it possible within one button to have part bold, and part normal
    text?
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image

    Answered by Irshad on July 10, 2016 at 02:35 AM

    You can write the css of specific button by writing the css class according to the specific "ID" of that button.

    For example if you want to make the bold text for the "next" button, you can inspect the element in Browser and can get the "id" of specific button, and according to that id you can write the css class. You would require to use hash tag # for writing the css class of specific "ID" of element. Below is the example:

    #form-pagebreak-next_30 { 

     font-weight: bold;

    }

    So the above css would be applied to specific element, whose id is "form-pagebreak-next_30".

    Please check the below screenshot, how you can inspect the element, and can get the "id" of specific element.

     

    You can also get the ids of specific element, by clicking on "Settings->Edit Properties->Advanced->Field Details". Please check the below screenshot:

    If you still have any query, or need further assistance, please feel free to contact us.

    Thanks.

  • Profile Image

    Answered by Benflips on July 10, 2016 at 02:46 AM
    These email strings are getting painful.
    My questions DO NOT relate to page navigation buttons.
    It relates to one specific button checkbox widget, and the very lengthy
    text I have on those buttons.
    Please review prior information as this is not remotely what my question
    related to
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image

    Answered by Irshad on July 10, 2016 at 04:25 AM

    I apologies for the inconvenience. Actually the specific checkbox button related css can also be achieved via "ID" option, that is as exactly same as per my previous answer in this thread. Please check the screenshot below:

     

    If you want, something else, can you please send us the screenshot of that, so we can assist you accordingly.

     

    Thanks

  • Profile Image

    Answered by Benflips on July 10, 2016 at 04:46 AM
    No it is not. I am referring to a checkbox button widget.
    You are referring to something completely different
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on July 10, 2016 at 08:59 AM

    Apologies for the misunderstanding. I have gathered, what I believe, all your requirements/concern on this thread. 

    Is it possible to make just those three buttons effectively 'higher'compared with the others, and wrap the text so the buttons don't have to be so wide?

    Yes, it is possible, you can add the CSS codes below to the widget to do that. It will specifically make the 2nd, the 3rd, and the 14th option's height higher than the others.

    Note: please remove the original CSS codes I told you to add on my previous answer on this thread.

    .checkboxes input + label{

    line-height: 20px;

    display: table-cell;

    vertical-align: middle;

    }

    #checkboxes .rowButtonCheckbox:nth-child(2) input + label, #checkboxes .rowButtonCheckbox:nth-child(2){

    height:80px !important;

    }

    #checkboxes .rowButtonCheckbox:nth-child(3) input + label, #checkboxes .rowButtonCheckbox:nth-child(3){

    height:120px !important;

    }

    #checkboxes .rowButtonCheckbox:nth-child(14) input + label, #checkboxes .rowButtonCheckbox:nth-child(14){

    height:80px !important;

    }

    If you look at options 2 & 3 in particular, I would like the text in parentheses to be on a second line underneath the title of "Limited Scope" Chiropactor or "Wellness Chiropractor" If these titles could also be bold that would be great too

    I would like to apologize. I'm afraid it is not possible to make part of the button's text move to the next line. But you can try to adjust the width of the buttons to make the text in the parenthesis look like it is on a new line.

    Then, if you want to make the text in the butons 2 and 3 bold, you can add the CSS codes below:

    #checkboxes .rowButtonCheckbox:nth-child(2) input + label, #checkboxes .rowButtonCheckbox:nth-child(3) input + label{

    font-weight: bold !important;

    }

    Is it possible for only a couple of the buttons to have bold text? Indeed, is it possible within one button to have part bold, and part normal text?

    Yes, it is possible for only a couple of buttons to have a bold text. (Please check the codes above. The codes will specifically make the text in the buttons 2 and 3 bold.) However, I'm afraid it is not possible to make only par of the button's text bold and part of it normal.

    I hope this helps. Let us know if you need any further assistance. Thank you.