Hi Joris,
The text-align: left needs to be added to the label element. You can create your own class for that (as I did below) using Sass, name it "label-left" for instance, which you can then put on your Text Box. The class makes sure the label is aligned left.
.label-left {
label {
text-align: left;
}
}
For information how to add custom classes to your theme you can check the reference guide (https://docs.mendix.com/howto/ux/style-with-gulp-and-sass), but the easiest way is using Sass with koala, for which you can check this blog for a how-to: https://www.mxblog.nl/2016/03/using-sass-with-mendix/
Alternatively you can use the below CSS and just add it to your stylesheet
.label-left label {
text-align: left;
}
Hi Joris,
My answer above indeed describes your first scenario, which would result in only the labels moving to the left, as demonstated here with the "Taal" label:
But if I understand correctly you want the input area to 'shift' to the left as well, but not creating an empty space on the right of the field? You can use a combination of the added class, and a reduction in reserved place for the label, in other words: reduce "Label width". This a setting in you dataview property window:
In the above picture the label width is 3, below it is 2. Is this what you mean?
I recommend using the 'layout grid' which you can divide into multiples of 12.
Since you have really long input fields I recommend a 4-4-4 layout grid and place everything you want into the far left column of the layout grid.
But if you just want everything to move to the left like you mentioned in your sketch.
I would move everything into a container and then on the container's style type:
float: left;
You can reduce the space the labels take up by changing the label width setting:
For global styling I'd propose the following as a basis
.form-horizontal {
.control-label {
text-align: left;
}
}
Hi Wieke,
Thanks for your elaborate reply! To be sure: will only the label (-text) move to the left [scenario (1) in below picture], or will both the label and the content field move to the left [scenario (2)]?
I'm gunning for scenario (2), so maybe this is not (just) a text-alignment matter, but something like a 'content-alignment matter'?
Regards, Joris
So this is what I'd like (actually exactly what a table would do for you :p, but then using the in-built label functionality of the content-fields :)):