My CSS changes to the Style Sheet doesn't reflect on browser

Hi everyone, hope someone can shine a light as to where i'm going wrong. 

I'm new to Outsystems and following the development exercises.

On 5.4x Style sheets it suggests to make some changes so when a large ToDo is created with a large title is should fit within the parameters. However, after applying the CSS scripting by manually typing into editor, it doesn't show in my browser. 

Link to my dev application: 

https://tamanna-begum.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/ToDo_TB/ToDos?_ts=637139359090729085

Hi,

Two points:

  • The OML you share is empty;
  • The application link you share, as it is not anonymous, cannot be signed in.

Question: Do you understand how CSS hierarchies work?


Hello Tamanna Begum!

You have uploaded your Core oml file instead of the one with your user interface, would you mind uploading the other one?

Also, for the link that you provided I was going to take a look in Chrome's developer tools to see what was going on with the styling, however I cannot login.  Would you be able to enable Anonymous access to the screens?

Thank you

Oppps sorry, my bad. Cheers

I advise you to see this documentation:

Please refer to the Mobile Application Architecture course, in particular the Plugins, UI & Security lesson (around the 4:26 mark).

Nuno Miguel Verdasca wrote:

I advise you to see this documentation:

Please refer to the Mobile Application Architecture course, in particular the Plugins, UI & Security lesson (around the 4:26 mark).

Thanks Nuno, I certainly will :)


Craig St.Jean wrote:

Hello Tamanna Begum!

You have uploaded your Core oml file instead of the one with your user interface, would you mind uploading the other one?

Also, for the link that you provided I was going to take a look in Chrome's developer tools to see what was going on with the styling, however I cannot login.  Would you be able to enable Anonymous access to the screens?

Thank you

Hey Craig, would you be able to advise me on how I can enable anonymous mode? Thanks!


Tamanna Begum wrote:

Craig St.Jean wrote:

Hello Tamanna Begum!

You have uploaded your Core oml file instead of the one with your user interface, would you mind uploading the other one?

Also, for the link that you provided I was going to take a look in Chrome's developer tools to see what was going on with the styling, however I cannot login.  Would you be able to enable Anonymous access to the screens?

Thank you

Hey Craig, would you be able to advise me on how I can enable anonymous mode? Thanks!



On screen, in roles, you have there the option of anonymous:

Nuno Miguel Verdasca wrote:

Tamanna Begum wrote:

Craig St.Jean wrote:

Hello Tamanna Begum!

You have uploaded your Core oml file instead of the one with your user interface, would you mind uploading the other one?

Also, for the link that you provided I was going to take a look in Chrome's developer tools to see what was going on with the styling, however I cannot login.  Would you be able to enable Anonymous access to the screens?

Thank you

Hey Craig, would you be able to advise me on how I can enable anonymous mode? Thanks!



On screen, in roles, you have there the option of anonymous:

Just checked and this option is selected.


Hello Tamanna,

Every screen would need to have "Anonymous" selected.  The screen you are showing, Login, should always be accessible anonymously, otherwise no one would be able to login.  Please check the other screens for the checkmark.

Regarding your .header-title style, it looks like the expression that holds your Title in ToDoDetail does not have the "header-title" class applied to it.  Can you try adding it like such?

Craig St.Jean wrote:

Hello Tamanna,

Every screen would need to have "Anonymous" selected.  The screen you are showing, Login, should always be accessible anonymously, otherwise no one would be able to login.  Please check the other screens for the checkmark.

Regarding your .header-title style, it looks like the expression that holds your Title in ToDoDetail does not have the "header-title" class applied to it.  Can you try adding it like such?

Hey Graig, checked all screens as suggested for the check box (anonymous). Also, added .header-title style within Title in ToDoDetail. Saved changes. Should that make a difference to the stylesheet now? 

Thanks!

Hey Tamanna,

My apologies, I forgot that "header-title" is already set by OutSystems.  It looks like you have everything correct, except your Title input box is set to the Notes variable instead of the Title variable.

Here we can see from Chrome the styles that are applied:

And here we can see in OutSystems how you have mapped the variable for Title:

The solution is to correct the variable for your input parameter.

Craig St.Jean wrote:

Hey Tamanna,

My apologies, I forgot that "header-title" is already set by OutSystems.  It looks like you have everything correct, except your Title input box is set to the Notes variable instead of the Title variable.

Here we can see from Chrome the styles that are applied:

And here we can see in OutSystems how you have mapped the variable for Title:

The solution is to correct the variable for your input parameter.

Thanks! Changed the variable as suggested. However, the 'Todos' created are still showing as blank. Please see screenshot. 


Are those from your old ToDos, or new ones?  Since you were previously saving the title into the Notes field, and the list is showing the value from Title, I would expect any old ones to still be blank.

Craig St.Jean wrote:

Are those from your old ToDos, or new ones?  Since you were previously saving the title into the Notes field, and the list is showing the value from Title, I would expect any old ones to still be blank.

Yes, that's right they are the old ToDos. Makes sense Craig, cheers for the support!