Form CSS being overridden by Popup .MainPopup class

Back to Forums

Vanessa Santo

Solved

Question

CSS

OutSystems Widgets

Hi everyone!

I'm fairly new to OutSystems and am now dealing with popups for the first time. I'm having trouble with setting a form inside a popup to have the label and corresponding input side by side.

I started by setting the form's "Label Position" property to "left align" and adjusting the label and input dimensions with cols. On Service Studio, the form was displayed as I wanted but on the browser, the input appears below the label and occupies all the width of the popup.

To try and debug this behaviour I inspected the popup and form and saw that:

The MainContent placeholder has a .MainPopup class declaring the width of the container as 100%. This is affecting the input widget because, on the browser, when I deselect that class on the widget, the form assumes the dimensions I declared on the form. I tried overriding the .MainPopup class on the popup screen stylesheet with other relative or absolute values but I always end up with my input widget being below its label. From here, I concluded that the .MainPopup classes are overriding the form's 'Label Position' property styles.
After a lot of trial and error, I accomplished the style I wanted with absolute widths on the form's label, input and immediate parent container. However, with these settings, I'm afraid I lose responsiveness on the form.

Is that a way to accomplish the style that I'm looking for (label and input side by side) inside a popup screen using cols or other relative widths?

I thought of adding the !important flag somewhere on the form's classes but I think that's not the right approach and also I don't know where to declare this. I also thought of removing the .MainPopup class but I don't know how to do it. I searched other questions on the forum and read some documentation but haven't found a solution yet.

I'm attaching some screenshots of my popup settings and how it shows up on the browser. The 'StartsOn' container is set to 300px and it shows up as I want and the 'EndsOn' container is set to 10 col and it ends up with the input widget below its label.

Can anyone help me out with this?

Thank you so much in advance,

Vanessa Espirito Santo

OneDrive20200526.zip

26 May 2020

José Pedro Proença

MVP

Solution

Hi Vanessa Santo,

There are a lot of ways to accomplish that.

One way would be with some css class, as you said. You should probably use a specific class, on the one hand because you are talking about a specific use case, and also so that you don't run the risk of changing something in one screen that would break somewhere else. I saw that you placed the class on the screen, so my second concern is not a problem, but be aware that you also need to make sure your declaration is at least as specific as the one in OutSystemsUI, so that it doesn't get overridden. Also, if you use a WebBlock know that the classes specified on WebBlocks are always the ones with the least priority, so will likely be overridden.
- More about the Specificity of CSS classes and on Cascading.
Another solution is to use AlingCenter from OutSystems UI.

You could also use columns to achieve that:

Let me know if you need more help :)

26 May 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines