CSS styling the shown labels in the annotator

[jrens (Jacco)]

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;

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