Creating a custom grid layout for checkboxes in Prodigy UI

[ines (Ines Montani)]

Hi! Here's a very small CSS snippet that should work pretty much out-of-the-box:

Display choice options in columns

With the new global_css option in v1.7, you should be able to add this pretty easily. The options container doesn’t have a human-readable class name at the moment, but you can find the current compiled one by opening your browser’s developer tools: [54] If you’re using a modern browser, the following CSS should be all you need: .c01132 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } This will display the contents of that container (i.e. the options) using CSS …

If you need more than two columns, you can just add another entry to the grid-template-columns. You can also customise the cardMaxWidth theme setting if you need the annotation card to be wider and give it more space for the columns.