Choices show in one long column

jktodd007 · August 4, 2019, 8:31pm

How would I display a choice field in one column instead of like below? Column

mnikitina · August 5, 2019, 6:32pm

Please paste the following code in CSS Editor to align all choice values in one column.

.fd-form .fd-checkbox-group>.row {
  display: grid;
  grid-column-gap: 50px;
}

jktodd007 · August 5, 2019, 9:20pm

Thank you for the quick response.

noorshahida88 · August 6, 2019, 1:42am

Thanks @mnikitina works for me too but what if I want to align those check boxes items into 2 or 3 columns (due to more than 20 items)?

mnikitina · August 6, 2019, 9:22am

Hello @noorshahida88!

You can use the below code in CSS Editor.

In grid-template-columns you can specify how many columns you need. In my example, it is 3 columns. Also, you can specify the size of each column, for example: grid-template-columns: 20px 20px 40px;

.fd-checkbox-group{
  display: grid;
  grid-template-columns: auto auto auto;
}

noorshahida88 · August 7, 2019, 7:58am

Thanks @mnikitina

noorshahida88 · October 30, 2019, 2:05am

Hi @mnikitina,

Found that after 6 rows, the choices did not align into 2nd and 3rd column as per it should.

I used your default script only:

.fd-checkbox-group{
display: grid;
grid-template-columns: auto auto auto;
}

mnikitina · October 31, 2019, 7:55am

Hello @noorshahida88,

Please remove custom CSS and try the default settings.

Select the control and go to Settings > Control > Columns. Specify the number of columns.

noorshahida88 · October 31, 2019, 9:19am

Thanks, after adjust the width and set wrap as false, then the view is per what I wanted.