Is there a way to control "line-height" of the main text box


I'd like to adjust the line-height attribute of the main text box (where a user annotates on) to show larger portions of text. Currently it seems to be hard coded to 1.7. I tried setting custom CSS in prodigy.json for the prodigy-content class which had no effect. Inspecting the UI rendered in the browser this attribute seems to be overwritten by the hard coded value and the box does not seem to have a unique class name but rather a random one, e.g. c01135.

Is there a way to fix this or am I just looking at the wrong thing here?
Thanks for any pointers :slight_smile:

Hi! For the regular text interfaces, the .prodigy-card class is definitely the correct one to use to override things like line height and font style. I just had a look and you're right that the span highlighting UIs have their own wrappers to ensure a slightly higher line height, and we should definitely expose this via a human-readable name (e.g. .prodigy-spans). I'll add this for the next release.

In the meantime, you could do:

.prodigy-content > div {
    line-height: 1.5;

Or, if you're adding the overrides to your global prodigy.json and want to make sure they're only applied to a specific interface:

[data-prodigy-view-id="ner"] .prodigy-content > div {
    line-height: 1.5;

Thanks Ines! That works for me, I also added a rule for the "mark" padding to not overlay surrounding text:
.prodigy-content > div > mark { padding: 0 }

1 Like

Cool, thanks for the update! v1.10.8, which was just released should now give you access to a named prodigy-spans class as well.