Solved

Correcting the width of a label in css

  • 28 November 2023
  • 4 replies
  • 119 views

Badge

Hello everyone,

We have a label with long text which we want to wrap to a certain width but not to violate the css of other tags. I guess we can go with a overflow-wrap: break-word but not quite sure how we can fix it and which class do we need to change.

icon

Best answer by Erik Brink 19 December 2023, 09:42

View original

This topic has been closed for comments

4 replies

Userlevel 5
Badge +5

Hi Slavoljub,

First of, sorry for the late reaction.

Can you give some details about the case you are facing this? What component are we talking about?

A guiding screenshot may be helpfull too.

Best regards,
Erik Brink

Userlevel 5
Badge +16

Hello everyone,

We have a label with long text which we want to wrap to a certain width but not to violate the css of other tags. I guess we can go with a overflow-wrap: break-word but not quite sure how we can fix it and which class do we need to change.

The data-testid come in handy to really pinpoint your css alterations. 

Basically it says that only for the grid-cell of column activity_title in this case overrule the nowrap on the span with class value_renderer.

[data-testid="grid-cell__activity-title"] .value-renderer {
white-space: normal !important;
}

 

Userlevel 5
Badge +5

You can read more about applying Custom CSS to the Universal GUI here:
https://docs.thinkwisesoftware.com/docs/sf/themes#custom-css-universal

Badge

Sorry for my late reply. Thanks for the help, it was helpful!