How can I use to separated lines for the value and unit?

[Norick]

I have the problem that the value with the unit is too long to have both on the same line. I would like to have the value in one line and below the unit.

Up to now I have not found a way to do that but for sure there is a simple solution.

Thanks in advance

[mstormi (Markus Storm)]

No, no simple one, but this one works.
Or you could adjust the font size.

Vertical stepper item?

Thanks Justin. Then is there any means to forcefully place the widget below the text like with sliders? If not, wouldn’t such an (optional) feature make sense? @florian-h05 Here’s how it looks like on mobiles, see how it cuts and squeezes all the text in the upper block: [grafik]

[JustinG]

If you show the widget yaml you are using, we can probably give you a more specific response.

[Norick]

sure:

- component: f7-col
            config:
              style:
                font-size: 13px
                font-weight: 800
                padding: 3px
            slots:
              default:
                - component: oh-label-card
                  config:
                    action: analyzer
                    actionAnalyzerCoordSystem: time
                    actionAnalyzerItems: =[props.rainItem]
                    icon: '=Number(items[props.rainItem].state.replace("mm/h","").trim()) < 0.1 ?
                      "oh:classic:sun" :
                      Number(items[props.rainItem].state.replace("mm/h","").trim())
                      < 5 ? "oh:classic:rain_low" :
                      Number(items[props.rainItem].state.replace("mm/h","").trim())
                      < 15 ? "oh:classic:rain_strong" : "oh:classic:rain_heavy"'
                    iconColor: gray
                    item: =(props.rainItem)
                    label: =items[props.rainItem].state
                    trendGradient:
                      - "#f94144"
                      - "#42b983"
                    trendItem: =(props.rainItem)
                    trendStrokeWidth: 5
                    vertical: false

[JustinG]

There are some technical reasons why this is a little harder with an oh-label-card than in some other instances. But, the way I would do this would be 3 steps:

1. show only the number in the card label property

label: =items[props.rainItem].numericState

2. add a css variable with the unit using the card’s style object

style:
  --card-unit: =`"${items[props.rainItem].unit}"`

3. add a stylesheet to the card that appends the css variable on a new line after the other text in the label

stylesheet: >
  div > span::after {
    display: block;
    content: var(--card-unit);
  }

[Norick]

with your very good idea I could solve it with this code:

label: =items[props.rainItem].state.replace("mm/h", "").trim()
                    style:
                      --card-unit: =`"${items[props.rainItem].unit}"`
                    stylesheet: > 
                      div > span::after { 
                        display: block; 
                        content: var(--card-unit); 
                        margin-top: 15px; /* Fügt Abstand zwischen Zahl und Einheit hinzu */

                      }

Thanks a lot!!