The stylesheet broken when loading different layout in different controllers

StackOverflow https://stackoverflow.com/questions/23625635

Question

Hi I got a strange problem.

When I clicked three pages shown in the following three images

Step 1 controller welcome

Step 2 other controllers

Step 3, go back to the step1 view controller welcome

The last image, when I back to controller welcome from the other controllers ,that is step 2 to step 3.

The stylesheets were cached by the browser,

The step 3's layout is differ to step1 layout.

But they are the same page,How could it be, it seems the browser caches the css files ?

I add two assets folder used by the two layouts, in application.rb config.assets.paths << "#{Rails.root}/vendor/themes"

    themes
├── ace-admin-theme
│   ├── avatars
│   ├── css
│   ├── font
│   ├── images
│   ├── img
│   └── js
└── lenord-single-page-theme
    ├── css
    ├── fonts
    ├── img
    ├── index.html
    ├── js
    └── rs-assets

Added the welcome.html.haml under layouts folder, so that welcome_controller can load this layout

layouts
├── _header.html.haml
├── application.html.haml
└── welcome.html.haml

All the source code I put here https://gist.github.com/poc7667/0198b973fce0fbf4dd26

Page A : OK enter image description here Page B : OK enter image description here Page A : Failed, the Page B's stylesheets are cached, it should be identical to original page A enter image description here

It didn't work when I comment the data-turbolinks-track for the css

The strange phenomenon still occurs.

--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -2,7 +2,7 @@
 %html
   %head
     %title VIVOTEK DQA DEVELOPER
-    = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true
+    = stylesheet_link_tag    "application", media: "all"
     = javascript_include_tag "application", "data-turbolinks-track" => true
     / Description, Keywords and Author
     / basic styles
diff --git a/app/views/layouts/welcome.html.haml b/app/views/layouts/welcome.html.haml
index 28d9c99..c3e6ec8 100644
--- a/app/views/layouts/welcome.html.haml
+++ b/app/views/layouts/welcome.html.haml
@@ -2,7 +2,7 @@
 %html
   %head
     %title VIVOTEK DQA DEVELOPER
-    = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true
+    = stylesheet_link_tag    "application", media: "all"
     = javascript_include_tag "application", "data-turbolinks-track" => true

I open the firebug to see the included css files, I found I need to reload the page to load the expected css files. How to fix it ?

enter image description here

Update

When I reload page, the console showed those css files were loaded

Started GET "/assets/ace-admin-theme/css/bootstrap.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
Started GET "/assets/ace-admin-theme/css/font-awesome.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800

When I click a hyperlink(by url helper) to other pages the css won't be load again.

But actually it should load the css files again, because some controllers use the different layout and assets.

But what's the worse is that if I click the link (generated by URLhelper) the problems happens But if I go to the page by typing the URL on the browser manually, it works fine!!

To brief, the css files only load in the first time, and other necessary css files(for other layout) won't be load anymore.(If I view the page by clicking the URLHelperLink), but it works by manually type the URL on the browser (for example: localhost:3000/welcome, localhost:3000/urlcommands)

Was it helpful?

Solution 

How could it be, it seems the browser caches the css files ?

Turbolinks

That might appear to be the case if you're using Turbolinks - which loads a new version of the <body> tag (leaving <head>). This would make your browser use the same CSS each request (where turbolinks is firing) problem would only be present if you're using the same layout

This may not be the problem (if you're changing layouts, the entire page will refresh)

A way to test this is to turn off turbolinks:

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all" %>

If you do this, Rails should refresh your whole page every time. This will allow you to see whether the styling will change each time

CSS

The other issue you may have is how you're calling your CSS. If you've got a different layout for step 3 - are you calling different CSS?

Personally, I would just use different styling for the different steps & incorporate them into the same spreadsheet.

Here's how I'd do it with SASS:

#app/assets/stylesheets/application.css.sass
.service
    .step1 
       //styling

    .step2
       //styling

    .step3
       //styling

Update

I would say the issue here is likely to be your structure of your code with Turbolinks. I'm 90% sure the issue will be with Turbolinks (especially as you wrote you "need to refresh" the doc to make the CSS work)

Can you share your layouts & how you're calling them in your controllers?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top