Log in to AnswerLog in to Follow
Tomasz M. Lipinski
18Views
6Comments
Solved
HOWTO Change CSS depending on context
Question
Reactive
Application Type
Reactive

Hi,

This is a use case similar to the one, described here. Shortly - I want to load some CSS content that is dynamic, i.e. read from a database regarding the current user or even created programmatically. There is no static URL that could be used.

I'm trying to adopt the mentioned solution to a Reactive Web application. I've added (to HTTP headers; using just JavaScript) a link to a page that is to serve the CSS content. But  when this content is  downloaded it is treated as "text/html" (instead of "text/css") and the header:

<link type="text/css" rel="stylesheet" charset="utf-8" href="/application/page/">

fails to be applied because:

Refused to apply style from 'https://server/application/page/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I'm loading my  CCS in the following way (in page's OnInitialize):

Can  I force mime type to Download? Or rather - what is an alternative way to download CSS content?

Thanks in advance for any hints.

Regards

Tomasz


0
0
on 23th Mar

Depending your architecture, simplest thing I can think of is offering this download from Traditional Web module, where you can set the mime type for download. Other approach would be to offer this content as REST api, where you can set Content-Type header to whatever you wish.

I think there's very little you can do with mime types for reactive pages (text/html) because it's single page app and that download of yours is served by javascript on that screen instead of the whole page being your download content.

 Here's a screenshot from similar reactive demo page:

br,

-Mikko(N)

edit: fixed a typo

See solution in context
0
0
on 23th Mar

Hi, friend!

Some time ago, I launched in forge the simple component called Dynamic CSS that changes the stylesheet depending on parameters you set, but the stylesheets must be part of the project. I don't know if it will help you like helped me. Take a look.

https://www.outsystems.com/forge/component-overview/9433/dynamic-css

Kind regards

0
0
on 23th Mar

You can use this kind of JS to generate stylesheet link

// Get HTML head element 

       var head = document.getElementsByTagName('HEAD')[0];  

        // Create new link Element 

        var link = document.createElement('link'); 
  
        // set the attributes for link element  
        link.rel = 'stylesheet';  
      
        link.type = 'text/css'; 
      
        link.href = 'style.css';  
  
        // Append link element to HTML head 
        head.appendChild(link);  
0
0
on 23th Mar

Depending your architecture, simplest thing I can think of is offering this download from Traditional Web module, where you can set the mime type for download. Other approach would be to offer this content as REST api, where you can set Content-Type header to whatever you wish.

I think there's very little you can do with mime types for reactive pages (text/html) because it's single page app and that download of yours is served by javascript on that screen instead of the whole page being your download content.

 Here's a screenshot from similar reactive demo page:

br,

-Mikko(N)

edit: fixed a typo

0
0
on 23th Mar

HI @Lenon Manhães , @Mykola (Nick) Tkachenko ,

Thanks for tips but I've already done it. The issue is that I have no statis CSS file (like "style.css" above). The value of href is an  URL of a  page that serves some CSS content. But this content gets back as "text/html" instead of "test/css" - and it fails.

Regards

Tomasz

0
0
on 23th Mar

Hi, @Mikko Nieminen ,

Thanks a lot - it works perfectlly. I've used the concept of an external Traditional  Web Page. The REST  API concept wait to be implemented.

Regards

Tomasz

0
0
on 23th Mar

Funniest thing happened - I tried this REST api approach myself and at least in the platform version I tested, it seems not possible to change Content-Type header for exposed REST endpoints!!

Same happens if I try to add 'Content-Type' header in OnResponse callback, custom headers work just fine.

I filed a support ticket on this, thanks for setting up the possibility for this insight!

0
0
on 23th Mar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.