Can't get Text content to wrap new lines, though the template works in Playground

[khof312]

I am following the instructions for getting text wrapping to work on LabelStudio templates. While the template text wraps in the Playground, it does not wrap in my local LabelStudio interface. Other CSS styling works.

To Reproduce
Use the following template:

<View>
  <Style>.htx-text{ white-space: pre-wrap; }</Style>
  <Style>.ant-radio-wrapper {border: 2px solid green;} </Style>
  
  <Text  value="a\\nb" name="text"  />

  <Choices name="choices" toName="text" choice="single-radio">
    <Choice value="1"/>
    <Choice value="2"/>
  </Choices>
</View>

Expected behavior
The text should be displayed on multiple lines.

Screenshots
In the playground:

Locally:

Environment (please complete the following information):

• OS: Linux
• Label Studio Version 1.15.0

[heidi-humansignal]

Hello,

Thanks for reaching out. Based on the instructions and our docs, the component can preserve newlines when you add a style rule like:

<Style>.htx-text{ white-space: pre-wrap; }</Style>

Since it works in the Playground but not in your local instance, here are a few suggestions to troubleshoot the issue:

1. Please try adding an extra selector to enforce the rule in your local Label Studio interface. For example, update your style block to:

   <Style> .htx-text, .lsf-richtext__container.lsf-htx-richtext { white-space: pre-wrap; }</Style>

Thank you,
Abu

Comment by Abubakar Saad
Workflow Run

[khof312]

Hi Abu,

Thanks for the suggestion, but it's still not working. I can see that the style is being applied (not overwritten), but still, the interface does not reflect it. I'd appreciate it if you have any other ideas to try...thank you!

[heidi-humansignal]

Hello,

Try using the !important and see if that works? That is weird how styles is not being applied on in this case.

Thank you,
Abu

Comment by Abubakar Saad
Workflow Run