Set radio button column to columns

[Hayley]

Hi. I have a search datapage that uses a set of radio buttons as a search field. I want the radio button to display in 4 columns. I cannot see this as an option on the 'Placement' option. How can I achieve this?

[PotatoMato]

Hi @Hayley, you can achieve this by adding a Header and a Footer or an HTML block, then insert the code below.

<style>
.cbFormFieldCell
{
    column-count: 4!important;
}
</style>

 

-Potato

[Lepidoptera]

On 7/15/2021 at 2:58 PM, PotatoMato said:

Hi @Hayley, you can achieve this by adding a Header and a Footer or an HTML block, then insert the code below.

<style>
.cbFormFieldCell
{
    column-count: 4!important;
}
</style>

 

-Potato

Great solution but can this be optimized so it won't affect other fields?

[Kurumi]

Hi @Lepidoptera - you can select a specific class of the Radio button. Here's a reference: 

 

[autonumber]

Hello! You can also try the code below to create columns for your Radio buttons. 

<style>
span[data-cb-name="cbFormDataRadios"]{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
</style>

 

Please note that when you are creating columns using this code, the Radio buttons itself is considered as 1 column as it is separated with its labels. If you would like to display it as four columns, you can adjust the number for grid-template-columns to 8. 

 

Hope this helps!