Alignment (left)

0
Hi, does anyone know how to align content fields (text boxes, drop downs, ref selectors, etc.) and their labels to the left of the page? I've tried putting 'text-align:left [even with the addition of !important];' on the fields, on the overarching container, layout grid, data view, and the page itself, but nothing worked. I can 'push' the fields (and their labels) to the left by putting them in a layout grid with an empty column to the right, but then the space for the fields is reduced, which kind of beats the purpose. Of course I can drop the field-labels and draw up a table for this purpose (manually writing and separating label and content field), but maybe there is some way to use the fields and their in-built label functionality, albeit aligned to the left. Hope someone knows! :) Regards, Joris    
asked
6 answers
5

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;
}

 

answered
4

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?

answered
1

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;

 

answered
1

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;
  }
}

 

answered
0

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

 

 

answered
-1

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 :)):

answered