1303
Views
4
Comments
Adding CSS Id in to a container
Question

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.

2020-09-15 13-07-23
Kilian Hekhuis
 
MVP

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.

2020-02-28 09-46-54
Eduardo Jauch

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.

2016-04-21 20-09-55
J.
 
MVP

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.


2020-02-28 09-46-54
Eduardo Jauch

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.

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