I am building a form in CF8 with a fairly long list of items in a checkbox group. By default in CF8 the checkboxes are displayed in a single vertical column. For my form a single column of checkboxes makes the form look bad and difficult to use. In CF7 it was easy to display the checkboxes in a horizontal grid layout with equal column widths.
In CF8 this does not seem possible due to the system assigning the default class of 'vertical fields' to the div that contains the checkbox group. I don't believe there is any way to override an existing class for an element without using Javascript. I have added some classes to the CF8 checkbox group element in an attempt to add some formatting to the checkbox group. The classes I have added would get close to solving the problem if CF8 didn't automatically assign the 'vertical fields' class. When I use my browser to inspect the checkbox group element and manually remove the vertical fields class, the class I have assigned reformats the checkbox group. The class I have assigned is - 'horizontal fields'. This does not work perfectly as the checkboxes are not lined up in nice neat columns but it does at least display the checkboxes horizontally. Adding the 'equal width' class changes the formatting a little but still does not line the checkboxes into columns. The 'grid' class seems to have no effect. Is there any way to display a Checkbox Group in equal width columns or a grid?
In CF8 this does not seem possible due to the system assigning the default class of 'vertical fields' to the div that contains the checkbox group. I don't believe there is any way to override an existing class for an element without using Javascript. I have added some classes to the CF8 checkbox group element in an attempt to add some formatting to the checkbox group. The classes I have added would get close to solving the problem if CF8 didn't automatically assign the 'vertical fields' class. When I use my browser to inspect the checkbox group element and manually remove the vertical fields class, the class I have assigned reformats the checkbox group. The class I have assigned is - 'horizontal fields'. This does not work perfectly as the checkboxes are not lined up in nice neat columns but it does at least display the checkboxes horizontally. Adding the 'equal width' class changes the formatting a little but still does not line the checkboxes into columns. The 'grid' class seems to have no effect. Is there any way to display a Checkbox Group in equal width columns or a grid?