Change widths of Label-content combi

0
By default the widths of a label and a content always have a ratio of 3 to 9. This is defined by the default Mendix textbox. I use two which look like this: I am trying to add more room for the labels and make them look like this: What is the best way to do that? Styling or javascript or otherwise? I have added a surrounding container and apply this styling to it: .labelsandcontents { div.mx-textbox { background-color: green; label { width: 200px; background-color: yellow; } div > input { width: 100px; background-color: brown; } } } But that gets overruled by the bootstrap classes col-sm-3  on the label and col-sm-9 on the content. NB Never mind the colors, they are just here during developing the styling.
asked
2 answers
6

Why not set label with in dataview properties to 4 or 5?

If only for a selection of input widgets, then I would add a layout grid with 2 columns with required distribution. Add text widget with semi-bold style in first column and input widget in 2nd w/o label

I prefer this over custom styling, as these are more hidden and less maintainable out of the box

answered
0

I think it can be adjusted through styling by creating your own class or using css ladder as you used already.

Can you try an add !important to your styles? This won’t let the other col class overwrite your style.

for example:

width: 200px !important;

Let me know if it works.

answered