"Buttons Radio" widget: line-wrapping produces duplicated text

Hi. I'm new to Jotform, attempting to create a survey with specific style characteristics.

• Radio-style question/answers, but styled as buttons
• Longish text labels within each button, with largish text: most labels wrap to a second line

I tried using the basic "single-choice" element and using CSS to style it as a button, but I couldn't figure out how to get rid of the radio-button circle.

Then I discovered the "buttons radio" widget and figured the problem was solved. I arrayed the buttons vertically, expanded them to fill most of the horizontal space, and used CSS to allow text wrapping (and grow the buttons vertically to accommodate the extra line(s).

However, this has produced a strange side-effect: each button's label now displays TWICE...and the indicator arrow also displays twice for each button. I haven't been able to figure out how to get rid of the duplicate elements.

I'm pasting my CSS code below. I'll also append a screenshot so you can see what I'm struggling with. Thanks in advance for your help!

.radios.blue .rowButtonRadio:first-child 

 input.checkedButtonRadio+label {

 background: #FB6F41!important;

 color: white !important;

}

.radios.blue .rowButtonRadio:last-child 

 input.checkedButtonRadio+label {

 background: #eb1010 !important;

 color: white !important;

}

input.checkedButtonRadio+label {

  background: #090947 !important;

  color: white !important;

}

label span {

 font-size: 18px !important;

 font-weight: 400 !important;

}

label {

 white-space: normal !important;

 padding: 20px 40px; /* Optional: makes tall buttons for wrapped text */

 text-align: center; /* Optional: centers text inside the button */

}

label span {

 display: inline-block;

 white-space: normal !important;

 line-height: 1.2;

 font-size: 18px !important;

 font-weight: 300 !important;

 text-align: center;

}

/* Make sure label itself expands vertically and is not cut off */

label {

 display: block !important;

 white-space: normal !important;

 height: auto !important;

 min-height: 64px;

 overflow: visible !important;

 padding: 24px 40px;

 background: #ffffff !important;

 background-image: none !important;

 border: 1px solid #999999 !important;

 border-radius: 12px !important;

 box-sizing: border-box;

 box-shadow: none !important;

 text-align: center;

}

/* Let text wrap inside label */

label span {

 display: inline-block;

 white-space: normal !important;

 line-height: 1.4;

 font-size: 18px !important;

 font-weight: 400 !important;

 text-align: center;

 vertical-align: middle;

}

/* Force each row to fit its content */

.rowButtonRadio {

 height: auto !important;

 min-height: auto !important;

 overflow: visible !important;

 margin-bottom: 16px;

}

/* Selected state style */

input.checkedButtonRadio + label {

 background-color: #DEE7FF !important;

 border-color: #aac8ff !important;

 color: #000000 !important;

}

/* Force wrapper to allow full button height */

.rowButtonRadio {

 display: block !important;

 height: auto !important;

 overflow: visible !important;

}

/* Ensure container grows with content */

.wrapperButtonRadio {

 height: auto !important;

 overflow: visible !important;

 display: block !important;

}

Hi Andy,

Thanks for reaching out to Jotform Support. You can remove the unnecessary text and arrow by Injecting CSS Codes into your widget. Let me walk you through it:

1. First, copy this code:

.wrapperButtonRadio > label > span:nth-child(2) {

    display: none !important;

}



.radios label:after {

    display: none !important;

}

2. In Form Builder, click on the concerned widget to select.

3. On the right side of the selected widget, click on the Wand icon.

4. On the right panel, go to Custom CSS.

5. Paste the provided CSS code and click on Update.

Result:

Give it a try and let us know how it goes.

That worked! Thank you.

Another question: how do I make the buttons in "buttons radio" widget responsive? I currently have the width set to 500 in "General" settings; in mobile display, this results in the right half of the buttons being cut off.

Hi Andy,

You can use the provided CSS code to adjust the width value for mobile devices.

@media only screen and (max-width: 600px) {

.wrapperButtonRadio > label {

    width: 250px !important;

}





.wrapperButtonRadio {

    width: 250px !important;

}

}

Result:

Give it a try and let us know how it goes.

That code adjusted the width equally for both desktop and mobile, rather than adjusting properly per device. I pasted the code you provided at the end of my existing CSS...perhaps I made some syntax error? Here is the full code:

.radios.blue .rowButtonRadio:first-child 

 input.checkedButtonRadio+label {

 background: #FB6F41!important;

 color: white !important;

}

.radios.blue .rowButtonRadio:last-child 

 input.checkedButtonRadio+label {

 background: #eb1010 !important;

 color: white !important;

}

input.checkedButtonRadio+label {

  background: #090947 !important;

  color: white !important;

}

label span {

 font-size: 18px !important;

 font-weight: 400 !important;

}

label {

 white-space: normal !important;

 padding: 20px 40px; /* Optional: makes tall buttons for wrapped text */

 text-align: center; /* Optional: centers text inside the button */

}

label span {

 display: inline-block;

 white-space: normal !important;

 line-height: 1.2;

 font-size: 18px !important;

 font-weight: 300 !important;

 text-align: center;

}

/* Make sure label itself expands vertically and is not cut off */

label {

 display: block !important;

 white-space: normal !important;

 height: auto !important;

 min-height: 64px;

 overflow: visible !important;

 padding: 24px 40px;

 background: #ffffff !important;

 background-image: none !important;

 border: 1px solid #999999 !important;

 border-radius: 12px !important;

 box-sizing: border-box;

 box-shadow: none !important;

 text-align: center;

}

/* Let text wrap inside label */

label span {

 display: inline-block;

 white-space: normal !important;

 line-height: 1.4;

 font-size: 18px !important;

 font-weight: 400 !important;

 text-align: center;

 vertical-align: middle;

}

/* Force each row to fit its content */

.rowButtonRadio {

 height: auto !important;

 min-height: auto !important;

 overflow: visible !important;

 margin-bottom: 16px;

}

/* Selected state style */

input.checkedButtonRadio + label {

 background-color: #DEE7FF !important;

 border-color: #aac8ff !important;

 color: #000000 !important;

}

/* Force wrapper to allow full button height */

.rowButtonRadio {

 display: block !important;

 height: auto !important;

 overflow: visible !important;

}

/* Ensure container grows with content */

.wrapperButtonRadio {

 height: auto !important;

 overflow: visible !important;

 display: block !important;

}

.wrapperButtonRadio > label > span:nth-child(2) {

  display: none !important;

}

.radios label:after {

  display: none !important;

}

@media only screen and (max-width: 600px) {

.wrapperButtonRadio > label {

  width: 250px !important;

}

.wrapperButtonRadio {

  width: 250px !important;

}

}

Never mind! Figured it out...just a matter of adjusting max-width.