97
Views
10
Comments
Label alignment Reactive Web
Question

Hi all,

In traditional web when you use a form and you want to align the label, there is a label alignment property within the form. Im developing in Reactive web and im missing this option... Whats the easiest way to alignment the labels left of the input widget?


Thanks in advanced!

Rank: #12575

You could put the label and the input in separate containers. Then adjust the width of the label and input containers so they appear on the same line.

Rank: #204

Hi the grid usually has 12 columns, you give 1o for your input and 2 for the label as you can check in the print



I also have situation where I need to have labels on left of input, but it is not working, if it is a dropdown box it works fine then the label and dropdown box appears on same line, but if it is input then it wraps to next line, even though the label and input widths are small enough to go onto one line. How can I get the input on the same line in an elegant way please?


I checked the CSS and it seems if I disable in the CSS 

.form span[class*="input"]  

the "display: block;" then it is fine

But I do not want to change this for the whole of my website, and also not for each Form, that is silly.


Any good ideas please?




Currently I changed this for our entire site, I think we shall ahve all Forms with labels on left so it is OK, it seems to work, it was so nice with the standard web pages when one could select for a Form to have labels at top or left and it worked, can we have that in react as well, will be very nice


.form span[class*="input"] {
    display: inline !important;
}

I was wrong! GRRRR

Now I have this problem, for inputs the "required field" is displaying in a random place, for dropdowns it is still perfect



Rank: #139

Hi Elize,

I agree that your approach is only leading you further down the wrong rabbit hole.  So let's start from scratch and let's please find a solution that doesn't involve that ugly im...nt!

For starters, the behaviour you are describing doesn't strike me as the normal.  When I make inputs small enough, even without a container around them, they nicely sit on same line as label.

Can you share a sample oml where this problem occurs ?  Can you also check what version of Outsystems UI you are using.  And finally, you have identified this display:block that is bothering you, can you use developers tools of chrome to identify where this is being set, as that might not be in Outsystems base css but in some custom CSS at your company ??

And if all else fails, you could do as Brendan says and put containers around your inputs as a last resort.

Dorine

Rank: #338

Outsystems Neves wrote:

Hi all,

In traditional web when you use a form and you want to align the label, there is a label alignment property within the form. Im developing in Reactive web and im missing this option... Whats the easiest way to alignment the labels left of the input widget?


Thanks in advanced!

 

 Hi,

We can set form label align property to left and use OutSystem text-align-right class on label so it will make the label left align to input which you want to achieve 

Hope this helps 

Thanks 

Ashish 

Rank: #139

Hi Elize,


just wanted to point out with my answer that this is not behaviour that everybody has, and is probably related to something specific in your implementation.  

That's why I asked for your version of outsystems ui.  For comparison, I don't have anything relating to display : block for inputs in my version of that file...

As you are not going into any sort of path to fix this, I won't either.  (b.t.w. your upload of oml didn't work)

Dorine

Hi,

You can make any customizations you want via css. But remember one thing, that doing inline css is not a best practice. Then it depends on the alignment you want to do.

Cheers