18
Views
2
Comments
Solved
Label ignores "margin-bottom" when removing "Fill" from width
Question
Application Type
Reactive
Service Studio Version
11.9.0 (Build 33413)

I figured that when I drag and drop and input label + input field there is a "margin-bottom" defined on the label in Outsystems UI

.form label { margin-bottom: var(--space-s); }

I want the label width to adapt to the text length so in the Styles I remove "width=Fill" (remove value and hit enter).

Whenever I publish, the "margin-bottom" is ignored (no more distance between label and input).

I tried to hardcode "margin-bottom" in different ways, used !important but nothing works.

Any ideas?

PS: When you change "width=Fill" to pixels there is a new class .OSInline added to the element
PPS: Its only ignored when using px, it works when using col (e.g. width=1col)

Thanks so much
Chris

Rank: #286
Solution

Hi Christoph,

You can use following CSS for form labels in your screen.

.form label {

     margin-bottom: var(--space-s);

     display: inline-block;

}


Hope this helps, Thanks :)

Rank: #9466

@Shweta Gedam thank you so much. This makes it work.

I just wonder why "display: inline-block;" is not set in Outsystems UI?

Any side effects you could think of?