CSS styling the shown labels in the annotator

Hi All,

I've only just started to use Prodigy for annotating and I'm having troubles with defining the correct CSS to set the label size in the annotator. Currently the label has an width of 100% set by the 'c01161' class, but this number is not a static selector. What can in do in my prodigy.json to have the label (prodigy-option?) being only 23%, so we can have 4 on each row, as shown here;

Scherm­afbeelding 2023-01-27 om 11.23.02

hi @jrens!

Thanks for your question and welcome to the Prodigy community :wave:

Check out this post:

Essentially, you could try adding a grid:

.prodigy-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;

I ran a quick demo to check. I used only 8 labels so, I used 2 columns, but you can try for 4 if you have enough space.
nyt_text_dedup.jsonl (18.5 KB)

PRODIGY_CONFIG_OVERRIDES='{"global_css": ".prodigy-options {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px;}"}' python3 -m prodigy textcat.manual textcat_ex data/nyt_text_dedup.jsonl --label TECH,BUSINESS,GLOBAL_NEWS,SPORTS,LEISURE,COOKING,OPINION,LOCAL_NEWS

If you use 4 or more columns, you may also need to change max-width in .prodigy-container to avoid your choices may overextending the container. Let me know if you have questions.

Let me know if this works!