Hi,

If you'r loading the CSS via file, you can add a parameter in front of the file name, example "CSSModule/Bootstrap.css?" + Site.CSSVersion. You will still need to change the site property everytime you change the css.

Best regards,

João Nobre

Hello João

Thanks for your answer

We are defining the CSS in the stylesheet, not through file

Regards,

Ângelo

Hello Ângelo 

Actually using file with versioning is a good option as the application will fetch new css file after deployment.

Please check : https://stackoverflow.com/a/1011636

Hope this helps :)

Thanks and Regards,
Atul Patel

Hi Angelo.

Which version of OutSystems are you using?

Nowadays OutSystems has the versionnumber, as suggested by Atul, already in the referenced files (the Stylesheet is also referenced) and when a file is published, the version number is updated.

I can change my CSS, publish the CSS and reload my page normally (F5) and see the changes.

Kind regards,

Remco Dekkinga

Hello Remco

I'm using P10.

But this only works when you use a file to define the CSS, right? If we're using the stylesheet, we need to force the cache clean (ctrl+F5) or wait for it to automatically refresh

Regards,

Ângelo

Hi Angelo,

The stylesheet from OutSystems is also a file called "Theme.ModuleName.Css?versionnumber" and should be updated on every publish of your module.

Are you using two different modules where one module (UI) is referencing another module (Theme)?

In this case you need to refresh references of the UI module and publish UI after you have changed the CSS in the Theme module.

When this is not the case, can you share the revisionnumber (10.0.xxx.0) of your Service Studio and Platform version and a part of the rendered sourcecode?

Kind regards,

Remco Dekkinga

Hello Remco

Yes, we have a big part (not all, for testing purposes) of the CSS in a separate module that's being consumed on all of the UI modules.

Of course we are refreshing all dependences when we change the CSS on the Theme module, but some of them seem to only take effect on the browser once we force the ctrl+F5

Regards,

Ângelo

The problem (as we have it over here) is that the number doesn't seem to increase every time. For instance, we have our own Icon webblock. In there you can use a static value and a size, selectable from a static. Every time we receive new icons, we add them to the static and update the CSS of the icon webblock with the CSS for all icons. This webblock is inside our Layout eSpace. After publishing and refreshing my other espaces, I see that the number for the CSS for both Layout and the Icon CSS is the same, but not updated from the last version (so before changes it said Layout.css?599 and Layout/Widgets/Icons.css?599). This causes the problem for us, since of course the browser doesn't know that the css has actually changed if this number is the same. How can we force this number to be increased? Do we need to change something in the actual Layout.CSS as well for it to actually update the number? Or does changing css never actually update the number?

Thanks in advance.

You could use the old cache-bust trick of appending a date-time string to the end of the url which makes every request unique... e.g `/Login.css?589&dt=201908021157`

We used to use this frequently on natively coded projects, should do the same thing here.

Hi guys, 

I already saw this happen many times.
I'm in contact with the OutSystems team to see if we can discover what's the problem so that this can be fixed.

Cheers.

Hello all!

I'm having the same problem...

Is there any solution yet?

Cheers.

Hi! Is there any update on this?

Cheers

Hello João. No. Platform 11.0.607.0 still presents the problem.

I'll inquire to them again.

Cheers.

We're having the same problem with the CSS being cached.  We are generating the PDF server side so we really don't have an F5 to clear the cache.

Hi!

I run into this post when searching for a solution for the same issue. 

When digging deeper into this problem I got to a scenario where the CSS was not updated in the browser and a workaround, that hopefully also works for you.

The screen was at an application module using an Application Theme which was based on the Company Theme. 

It was the Company Theme that had changed, no changes were necessary for the Application Theme. 

All modules were updated up to my application screen, however CSS was not updated in the browser.

So inspecting the CSS loaded on the browser I came to the following workaround:
I opened the Application Theme and I changed it slightly (an enter was sufficient) in order to force the update of the Company Theme CSS inside the Application Theme, then refreshed the modules that used the Application Theme to see the changes. And there they were on the browser without the need for a CTRL+F5.

Cheers.

Hello,

Would you have any update about this topic?

Thanks.