style classes not working

style classes not working

  

hi there,

i am wondering why if i put blue (Outsystems built-in css) in style sheet property it does not work:

, but if i put in extended, it works:


regards,

indra

Probably you a have a selector with more specificity and an inline-element can override because its has more specificity than classes.

Its more complex, but this is order: Inline styles, IDs, classes, attributes, and elements. Before you start to use inline styles or ids just to override everything, notice that a good css architecture should leave styles with less specificity possible for a better maintenance. ;)

Do you know how to inspect in your browser? Is the best way to know what is happen. Check this video: https://youtu.be/9r2dYgpxCd4. I used in an article about basics of CSS Box Model, if you want to take a look too (not topic related): https://medium.com/hi-interactive-community/css-and-box-model-the-lesson-that-i-would-like-to-have-had-sooner-ac81ae4dc3a8. ;)

To complete what João said, in Outsystems, if the style is in a webblock, the page style takes priority. But that you can see in edit mode.

Hi, 


Just like the other members said the page style > webblock style BUT you can achieve it by simple adding !important to your CSS. 

.Blue {

Background-color: Blue !important;

}


PS: it is important to keep in mind that you should avoid using !important unless you really need it. Using lots of !important styles will make maintenance a bit harder, because you break the natural cascading in your stylesheets.


Hope it helped !


Best regards,

Diogo Romero

I tried this on a container and it works fine but doing it on Input it is behaving same as Indra mentioned ...discovering more on this ..hopefully will get some idea soon.

One more thing when i dragged Input box in the sane container its showing the same weird behaviour ....


Regards

-PJ-

I just checked by inspecting element in my browser that when i am changing type='text' to something else it starts applying the blue class.


Regards

-PJ-

João Saro wrote:

Probably you a have a selector with more specificity and an inline-element can override because its has more specificity than classes.

Its more complex, but this is order: Inline styles, IDs, classes, attributes, and elements. Before you start to use inline styles or ids just to override everything, notice that a good css architecture should leave styles with less specificity possible for a better maintenance. ;)

Do you know how to inspect in your browser? Is the best way to know what is happen. Check this video: https://youtu.be/9r2dYgpxCd4. I used in an article about basics of CSS Box Model, if you want to take a look too (not topic related): https://medium.com/hi-interactive-community/css-and-box-model-the-lesson-that-i-would-like-to-have-had-sooner-ac81ae4dc3a8. ;)

Hi Joao,

It is very primitive (i add no css), i create web page and then apply Dublin template, then drag the input widget and use the built-in class, the result is as shown above (see also Pramod Jain's testimony).

regards,

indra


Indra Budiantho wrote:

João Saro wrote:

Probably you a have a selector with more specificity and an inline-element can override because its has more specificity than classes.

Its more complex, but this is order: Inline styles, IDs, classes, attributes, and elements. Before you start to use inline styles or ids just to override everything, notice that a good css architecture should leave styles with less specificity possible for a better maintenance. ;)

Do you know how to inspect in your browser? Is the best way to know what is happen. Check this video: https://youtu.be/9r2dYgpxCd4. I used in an article about basics of CSS Box Model, if you want to take a look too (not topic related): https://medium.com/hi-interactive-community/css-and-box-model-the-lesson-that-i-would-like-to-have-had-sooner-ac81ae4dc3a8. ;)

Hi Joao,

It is very primitive (i add no css), i create web page and then apply Dublin template, then drag the input widget and use the built-in class, the result is as shown above (see also Pramod Jain's testimony).

regards,

indra


"It is very primitive (i add no css) " . By applying the Dublin template you added the css from that template.


Best Regards,

Diogo Romero


Indra Budiantho wrote:

João Saro wrote:

Probably you a have a selector with more specificity and an inline-element can override because its has more specificity than classes.

Its more complex, but this is order: Inline styles, IDs, classes, attributes, and elements. Before you start to use inline styles or ids just to override everything, notice that a good css architecture should leave styles with less specificity possible for a better maintenance. ;)

Do you know how to inspect in your browser? Is the best way to know what is happen. Check this video: https://youtu.be/9r2dYgpxCd4. I used in an article about basics of CSS Box Model, if you want to take a look too (not topic related): https://medium.com/hi-interactive-community/css-and-box-model-the-lesson-that-i-would-like-to-have-had-sooner-ac81ae4dc3a8. ;)

Hi Joao,

It is very primitive (i add no css), i create web page and then apply Dublin template, then drag the input widget and use the built-in class, the result is as shown above (see also Pramod Jain's testimony).

regards,

indra


Can you inspect inside a browser and share a print of styles? The problem should be the specificity. So, you're trying to add a "Blue" class, but probably there is more specificity inside the block or template. You need to debug inside a browser to find the styles order.


here u are:

regards,

indra

Now, you need to check "Styles" tab. ;)

and as PRamonad said, it turns blue if not text:

The style;

Romero wrote:

Indra Budiantho wrote:

João Saro wrote:

Probably you a have a selector with more specificity and an inline-element can override because its has more specificity than classes.

Its more complex, but this is order: Inline styles, IDs, classes, attributes, and elements. Before you start to use inline styles or ids just to override everything, notice that a good css architecture should leave styles with less specificity possible for a better maintenance. ;)

Do you know how to inspect in your browser? Is the best way to know what is happen. Check this video: https://youtu.be/9r2dYgpxCd4. I used in an article about basics of CSS Box Model, if you want to take a look too (not topic related): https://medium.com/hi-interactive-community/css-and-box-model-the-lesson-that-i-would-like-to-have-had-sooner-ac81ae4dc3a8. ;)

Hi Joao,

It is very primitive (i add no css), i create web page and then apply Dublin template, then drag the input widget and use the built-in class, the result is as shown above (see also Pramod Jain's testimony).

regards,

indra


"It is very primitive (i add no css) " . By applying the Dublin template you added the css from that template.


Best Regards,

Diogo Romero



Hi,

I used the Dublin's built-in blue css.

regards,

indra

If its something related with type, it should be something:

input[type="text"] {
...
}

Its hard to find problem by post and pics. But you would be able to find what is happening in inspector. Try to check "computed" tab (next to styles) and background-color property. You should be able to check all styles applied and the order.

yes, the computed tabs:

regards,

indra

Open the property and you'll see what and where is property specified. ;)

PS: In doubt, click in each line to move to there.

I think it is, but can you show the computed with the property opened? 

is this?


It is, but you need to click on the arrow of background-color. 

So you can check all styles applied to the property (on element), selectors and files. I hope this can help you. ;)

Solution

Nice. So, now you got the answer: there is a input[type="text"] (you already knew :p) with white background.

Or you can use the extreme resource "!important", or inline style or add a css selector like this:

 
input[type="text"].Blue {
background: ;
}
Solution

Okay, thank you Sir.  However, i am still curious why the property that we set does not reflect in the element. Isn't it Outsystems is designed where "How developer intuitively work" ?

regards,

indra

Its about css specificity. Some templates CSS - not sure if its Dublin or SilkUI - have big specifity, so you need to overridem them. Of course, you can start an app without styles dependencies, but probably you want to use them to accelarate your application.

In my opinion, Outsystems resolves and accelarates more server-side problems than client-side, but I'm suspect since I'm frontend developer. If you not aware, its easy to make CSS mistakes. Its accelarates for sure but it can create entropies. I think platform will grow more in that direction, but its good to be aware about best front-end techniques for your own safety. :D