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!
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.
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
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
Dorine Boudry wrote:
This is definitely an issue in OutSystems CSS, I uplaod .oml example, but I am not going to go into any sort of path of trying to fix this, it is an intrinsic OutSystems problem and we are logging a call to them to fix this.
In this example the CSS I use to fix it is commented out in the stylesheet of "PeopleDetail" screen, tat CSS makes the Input also inline but then the "Required Field" is out of place as I shwed in my screenshots, please do not reply as I am not going to go into trying to fix this myself, just for itnerest to anybody else with the issue, will keep you posted as to what OutSystems says when and how to fix it.
The CSS
and this is found in OutSystemsUI.OutSystemsUI.css
Outsystems Neves wrote:
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
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)
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