CSS styling the shown labels in the annotator

[ryanwesslen]

hi @jrens!

Thanks for your question and welcome to the Prodigy community

Check out this post:

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 …

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!