Adding CSS Id in to a container

Adding CSS Id in to a container

  

Hi,


I would like to know how can i apply css to a container by Id(#id) instead of class(.class) in outsystems. can you please help me with an example too.

Hi Kuruma,

OutSystems doesn't use it's own variety of CSS: everything you put in the CSS is, without translation, loaded by the browser. So you do that exactly as you would without OutSystems.

EDIT: Like others pointed out below, the Ids generated by the platform are not "stable", and a combination of the name you provide and some internal name mangling. So you can't really use them in your CSS.

Hi Kuruma.

Why do you need this?

While in theory it would be possible, don't. The IDs are dynamically generated and every time an element is refreshed, the Id can and usually changes.

So applying styles through Id is something that must be dynamic, using JavaScript, and so, simply don't.

If you need to apply specifically, you can apply to the element directly. Use the style panel (in the properties).

Or use a selector that will select only that element.

Cheers.

Hi,

If you really want you can always use an unescaped expression inside your page/webblock.

for example:

"<style>#" + YourThing.Id + " { background-color: #ff0;}</style>"


Mind you, i would not recommend it, and you are better off using classes or even inline-styling.


J. wrote:

Hi,

If you really want you can always use an unescaped expression inside your page/webblock.

for example:

"<style>#" + YourThing.Id + " { background-color: #ff0;}</style>"


Mind you, i would not recommend it, and you are better off using classes or even inline-styling.


This is a nice solution, J. :)
You still must guarantee that you refresh the expression if you refresh the element.

But this kind of thing just make the application more messy.
That's why in the training, I always say: Forget about the #ID selector when styling...

Cheers.