Button Radios widget: How to remove the arrow at the bottom button

I want to change hight of optons boxes in line radio boxes also remove blue arrow in options

Hi Zahid,

You can add the custom CSS code to each widget to remove the blue arrow at the bottom of the button.

.blue .actviv_elem {

  background: none !important;

}

Let me show you how to add this to your widget:

1. In Form Builder, select the widget.
2. Click on Wand icon.
   
   
3. Go to custom CSS tab.
4. Paste the code.
   
5. You need to do this and add the custom CSS code to each of the widget.

I created a screencast of the result on my cloned test form:

Give it a try and let us know if you need any help.

how to make hight smaller

Hi Zahid,

You can use this custom CSS code to adjust the height of the button

/* button height adjust - 26536611 */

.wrapperButtonRadio {

  height: 35px !important;

}

/* codes end here - 26536611  */

Follow the guide I shared on my last post on how to add the custom CSS code to the widget and let us know if you need further help. Here's what it looks like on my cloned test form after applying the code:

Give it a try and let us know if you need any help.

extend font here to make font one line

Hi Zahid,

I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Hi Zahid,

Can you check my cloned test form and see if that works for you? If yes, here's what I did to the cloned test form:

1. In Form Builder, select the Button Radio widget.
2. Click on Gear icon to open the widget settings.
3. Change the width to 190px.
4. Click on Update button to save.

After doing that, you need to add this custom CSS code to the form:

/* Label width one line - 26536611 */

div#cid_19 {

  width: auto;

}

label#label_19 {

  width: 330px;

}

div#cid_20 {

  width: auto;

}

label#label_20 {

  width: 330px;

}

div#cid_21 {

  width: auto;

}

label#label_21 {

  width: 330px;

}

div#cid_22 {

  width: auto;

}

label#label_22 {

  width: 330px;

}

/* code ends here - 26536611 */

You can follow the guide on my previous post on how to add the custom CSS code to the form. Give it a try and let us know if you need any help.

https://form.jotform.com/251184546252456

Why alighment auto changes?

Hi Zahid,

Unfortunately, it is not possible to align the text into a single field together with the buttons, as the width for the fields is not enough, causing it to break into two lines.

Meanwhile, you can try using the code below, as it utilizes the empty space and breaks the text into two lines minimally while still keeping the buttons on the same line.

li#id_19,li#id_20, li#id_21,li#id_22 {

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

}

See the screenshot below for the results:

Let us know if you need any more help.

on mobile layout changes in two rows yes on top and no oon bottom. it should not be such

on mobile layout changes in two rows yes on top and no oon bottom. it should not be such

Hi Zahid,

Can you share which type of device you're using so I can test it as well? Meanwhile, We can shorten the length of the button so it does not change its orientation when using a mobile device. You can use the code below to and insert it to the widget CSS tab to achieve the result.

@media (max-width: 600px) {

  .wrapperButtonRadio,

  .wrapperButtonRadio label {

    width: 120px !important;

  }

}

See the comparison on the screenshot below:

Keep us updated and let us know if you need any more help. 

alighment issue in your screenshot

Hi Zahid,

I'll need a bit of time to look into your form, and I'll be back as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Hi Zahid,

You can add the code below to into the Button Radio widgets. It should help with the alignment issues and width of the button.

.rowButtonRadio {

display: flex;

}

.wrapperButtonRadio {

display: block;

width: calc(50% - 8px) !important;

}

Check out my result:

Give it a try and let us know if you need any more help.