Hello everyone, first of all  I would like to thank you in advance for any help I receive with this issue. 

I am new to OutSystems, I am trying to learn how to use it and have begun with the mobile app course. I reached exercise 5.4 about style sheets and I am having issues making the style sheet apply to the app.

I followed the course' instructions and I noticed that their style sheets don't match mine. They have "ToDoDetail", "ToDo", "PhoneTheme" and "BaseTheme" where I only have my ToDo style sheet and an "OutSystemsUI", I followed the courses instruction and no matter what I do, no matter what things I add to the ToDo Style sheet it has no effect whatsoever, I suspect it's constantly being overwritten by the "OutSystemsUI".

Another issue I noticed, my style sheet lacks a lot of the css code that the pdf says I should have.


Perhaps this is a dumb question, but I would appreciate any help I could :)

Thanks a lot, and sorry If I wasn't clear enough.

Lenon Manhães wrote:

Hi friend.

Try to remote the "button" before the dot. The class must be .button-group-selected-item etc.


Best regards


Hey,

Thanks for your reply, I just implemented your suggestion, i'll attach a pic just to confirm this is what you meant, but unfortunately, still no effect.. Something is still overriding it.

Hi Tiago,

OutSystemsUI tab usually appears only for reactive web apps not for mobile or any other type of OutSystems application. Please check if you are doing change sin correct application/ module. 

Share your your application oap file if possible so that I can check if there is any other issue in your app and module.

Solution

Sorry about the first answer.

For some reason, the button item keeps the first selected button class.

Add !important after the color and it must solve your issue.

Solution

Nikhil Gaur wrote:

Hi Tiago,

OutSystemsUI tab usually appears only for reactive web apps not for mobile or any other type of OutSystems application. Please check if you are doing change sin correct application/ module. 

Share your your application oap file if possible so that I can check if there is any other issue in your app and module.

Good evening,

Thanks for the suggestion. I have confirmed, I am in fact developing a mobile app.


Lenon Manhães wrote:

Sorry about the first answer.

For some reason, the button item keeps the first selected button class.

Add !important after the color and it must solve your issue.

Perfect! Removed the "." from the first reply and did this. Now it works perfectly. So whenever I want to change anything in the style sheet, I should add this "!important", in order to override it?


Hi, Thiago. I'm glad to help.

Not exactly. The !important comand after the property force the current class to overwrite the previows one, but this should be used only in specifics situations because can overwirte another properties in use by that same class in another widget, which cause serious troubles.

In outsystems we have a lot of style sheets in use for the same application, in a truly cascade. Use !important can overwrite another propertie you don't want to change.

In this situation, the created class to low/medium/high priority will be used only in this button group, so it's ok to push.


Best regards

Lenon Manhães wrote:

Hi, Thiago. I'm glad to help.

Not exactly. The !important comand after the property force the current class to overwrite the previows one, but this should be used only in specifics situations because can overwirte another properties in use by that same class in another widget, which cause serious troubles.

In outsystems we have a lot of style sheets in use for the same application, in a truly cascade. Use !important can overwrite another propertie you don't want to change.

In this situation, the created class to low/medium/high priority will be used only in this button group, so it's ok to push.


Best regards

Makes perfect sense, thank you for the great explanation and help!