Conceptual doubt regarding implementation of CSS on Container in P11

Hi All,

I have placed a Container in the MainContent. By default Outsystems takes the height of the Container as "20px". I have also specified a background color for Container as "Black". Now when i publish the code the div doesn't appears on the screen.


When the container gets render in the DOM the height property doesn't gets defined. That's why container is not visible. Is this a bug in outsystems? 


My Findings -> 

1. Now when i define a name to the container. The Container appears in the browser. 


2. Or when i specify the height as 21px in the style editor(Service studio P11 toggle editor). The container appears in the browser.



Please help to understand this CSS implementation.

It's just a bad design flaw in the CSS thing... it shows a "height" and "width" that are not ACTUALLY the "height" or "width" attributes, they are calculated based on the contents... but they will not actually become a "height" or "width" CSS property. This has annoyed me as well. If you actually specify a "height" or "width" it will work as-expected.

J.Ja

Justin James wrote:

It's just a bad design flaw in the CSS thing... it shows a "height" and "width" that are not ACTUALLY the "height" or "width" attributes, they are calculated based on the contents... but they will not actually become a "height" or "width" CSS property. This has annoyed me as well. If you actually specify a "height" or "width" it will work as-expected.

J.Ja

Hey Justin,

I agree with your explanation, but still I am not satisfied with the purpose of height and width default value defined in the respective attributes properties mentioned in the toggled property editor. Need more practical explanation on that :-p


Kind Regards,

Pravi Gupta 


Isn't just that the containers get a specified height in Service Studio just because you can then easily drop objects inside them? If the CSS height would be used we would always have flat containers and that wouldn't be so useful. Most of the time you drag something in the container anyhow so the minimum height in Service-Studio isn't such problem 9 out of 10 times. 

edit: I can't however find a servicestudio-(min)-height CSS attribute in the CSS files. Must be overlooking something