Creating a custom grid layout for checkboxes in Prodigy UI

[spyysalo (Sampo Pyysalo)]

Hi,

I'd like to create a custom grid-based layout for a manual multilabel text classification task, as in this mockup:

What would be the easiest way to do this in Prodigy?

(The actual task will have ~40 labels in 8 columns, and the task setting is fixed, i.e. the task cannot be decomposed into e.g. multiple stages.)

[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.

[spyysalo (Sampo Pyysalo)]

Brilliant, thanks for the quick response!