Some text on the Button Checkboxes widget is not formatting correctly

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.

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.

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)
...

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.

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
...

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.

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)
...

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.

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)
...

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

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)
...

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.