My CSS changes to the Style Sheet don't seem to work.

Hi everyone! I'm learning Outsystems right now and I am loving the tutorials. I've been following them to the letter and have had no problem so far. I am currently on The Style Sheets Exercise of Mobile Development II. The PDF is '5.4x-Style Sheets Exercise.pdf'

It has me editing the CSS file, publishing, but it seems like none of my changes are sticking. 

To be clear: the code seems to save and publish, but none of the changes in the tutorial seem to be reflected in the application

I'm a programmer, but CSS is relatively new to me. That said, I'm fairly certain I'm following the tutorial correctly. The code under the Theme properties tab, Style Sheet property is definitely correct and has the code I took straight from the tutorial pdf. Any direction or help would be wonderfully appreciated.

Solution

Can you share an OML of your current app?

One thing to watch out for is that if you are copy/pasting from the PDF, you may be inadvertently including incompatible characters when you're pasting in the CSS. PDF files can include non-printing characters that you won't see in the CSS editor, but which can potentially prevent the CSS rules from working.

Try typing the CSS in by hand and see if that fixes the issue.

Solution

Some times the changes have to be very specific. "Inspect" your screen in the browser to see what classes are overlapping  your CSS. 

There are some videos in OutSystems site that explain CSS very well , like this one

https://www.outsystems.com/learn/lesson/935/css-basics-part-1/?LearningPathId=2


Steffan Mouton wrote:

Hi everyone! I'm learning Outsystems right now and I am loving the tutorials. I've been following them to the letter and have had no problem so far. I am currently on The Style Sheets Exercise of Mobile Development II. The PDF is '5.4x-Style Sheets Exercise.pdf'

It has me editing the CSS file, publishing, but it seems like none of my changes are sticking. 

To be clear: the code seems to save and publish, but none of the changes in the tutorial seem to be reflected in the application

I'm a programmer, but CSS is relatively new to me. That said, I'm fairly certain I'm following the tutorial correctly. The code under the Theme properties tab, Style Sheet property is definitely correct and has the code I took straight from the tutorial pdf. Any direction or help would be wonderfully appreciated.

 Best I can tell you is, Share your Demo URL.. So that FOlks here can easily check & reply you.



G. Andrew Duthie wrote:

Can you share an OML of your current app?

One thing to watch out for is that if you are copy/pasting from the PDF, you may be inadvertently including incompatible characters when you're pasting in the CSS. PDF files can include non-printing characters that you won't see in the CSS editor, but which can potentially prevent the CSS rules from working.

Try typing the CSS in by hand and see if that fixes the issue.

This was definitely it! I went through, deleted all the space that could have hidden characters, and retyped things manually. Must have grabbed the hidden characters from the PDF. Thank you so much!


I was stuck with this mystery for a good 5 hours, and this discussion just saved me! Thank you.

Team - for some reason the typing it in; does not work for me.  I have tried a number of ways to do this too.  

The instructions say: 

In the ToDo tab, add the following CSS code, next to the $0. Page Layout
comment.  

I DO NOT have that $0. page layout comment.  My tab is blank.  I can type that page layout and type the code from the .pdf and still no "..." on my app.  Can you help tell me what I am doing incorreclty?


https://scipioni.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/ToDo_S_S/ToDos?_ts=637272114963488587


Try just add it in that tab, never mind the $0

Shannon Scipioni wrote:

Team - for some reason the typing it in; does not work for me.  I have tried a number of ways to do this too.  

The instructions say: 

In the ToDo tab, add the following CSS code, next to the $0. Page Layout
comment.  

I DO NOT have that $0. page layout comment.  My tab is blank.  I can type that page layout and type the code from the .pdf and still no "..." on my app.  Can you help tell me what I am doing incorreclty?


https://scipioni.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/ToDo_S_S/ToDos?_ts=637272114963488587


Hi Shannon, I'm having the same problem. Did you manage to solve it? Could you tell me how?



Hi LIa - I can't remember if I actually typed it in or copied and pasted either way.  Here is the CSS.  And that's all on my own theme tab.  No other code there.  Let me know how it goes. 


SyntaxEditor Code Snippet

.header-title {
width: 100%;
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
.header-title span {
white-space: nowrap;
}
button.button-group-selected-item.priority-low {
background-color: green;
}
button.button-group-selected-item.priority-medium {
background-color: orange;
}
button.button-group-selected-item.priority-high {
background-color: red;
}

Shannon Scipioni wrote:

Hi LIa - I can't remember if I actually typed it in or copied and pasted either way.  Here is the CSS.  And that's all on my own theme tab.  No other code there.  Let me know how it goes. 


SyntaxEditor Code Snippet

.header-title {
width: 100%;
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
.header-title span {
white-space: nowrap;
}
button.button-group-selected-item.priority-low {
background-color: green;
}
button.button-group-selected-item.priority-medium {
background-color: orange;
}
button.button-group-selected-item.priority-high {
background-color: red;
}

Hi Shannon, it actually worked when I put the exercise code loose in the empty space. I just had to make some adjustments.  I believe that later I will understand  CSS codes better.

Thank you so much for returning