The stylesheet malfunctioned while attempting to load varying layouts in separate controllers

Hey, I encountered a strange issue.

After clicking on the three pages displayed in the images below:

Step 1 controller welcome

Step 2 other controllers

Step 3, back to step 1 view controller welcome

The final image, when returning to controller welcome from other controllers, going from step 2 to step 3.

The browser cached the stylesheets,

The layout of step 3 is different from step 1.

Even though they are the same page, it seems like the browser is caching the CSS files?

I added two assets folders 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 can be found here: https://gist.github.com/poc7667/0198b973fce0fbf4dd26

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

Disabling the data-turbolinks-track for the CSS did not work

The peculiar issue still persists.

--- 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

Inspecting with Firebug, I noticed the CSS files being included, I realized I had to reload the page to load the expected CSS files. How can this be fixed?


Update

Upon reloading the page, the console displayed that the 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

However, when clicking on a hyperlink (via URL helper) to other pages, the CSS does not load again.

It should actually reload the CSS files because some controllers use a different layout and assets.

What's even worse is that clicking the link generated by URLhelper leads to the problem

But manually typing the URL in the browser works fine!!

In short, the CSS files only load the first time, and additional required CSS files (for other layouts) will not load anymore (when viewing via URLHelperLink), but manual entry of the URL in the browser (for example: localhost:3000/welcome, localhost:3000/urlcommands) works as intended.

Answer №1

Is it possible that the browser is caching the CSS files?

Troubleshooting Turbolinks

It could seem like the browser is caching the CSS if you're using Turbolinks. Turbolinks loads a new version of the <body> tag without refreshing the <head>, which may cause the same CSS to be used for each request where Turbolinks is active. This issue would only occur with the same layout being used.

To test if Turbolinks is causing the problem, try disabling it:

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

If you disable Turbolinks, your page should refresh entirely every time, allowing you to see if the styling changes accordingly.


CSS Organization

Another potential issue could be how you are organizing your CSS files. Are you using different CSS for each step in a multi-step process?

Consider using SASS to combine styling for different steps in one stylesheet:

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

    .step2
       //styling

    .step3
       //styling

Additional Thoughts

The root of your issue likely stems from your code structure with Turbolinks. Based on your comment about needing to manually refresh for the CSS to work, I suspect Turbolinks may be the culprit here.

Could you provide more details on your layouts and how they are being called in your controllers?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having Trouble with the Background Video Scaling on My HTML Bootstrap Page for Mobile Devices

I have been working on an HTML background video page, and everything seems to be working perfectly on desktop. However, when it comes to mobile, the video does not cover the full screen. Only half of the video is visible on the mobile screen. Here is the ...

Building a table using MUI 5 and the powerful Grid component from Material UI

For my project, I decided to utilize the Grid component of Material UI v5 to create a global table component. This choice was made due to the difficulties encountered when trying to modify the border and border radius for the table row and footer elements. ...

Caution: The presence of <li> within another <li> is not permitted in validateDOMNesting()

I am facing a challenging background error warning that I am struggling to solve. As a beginner, I understand the need to change li, but I'm not sure where to begin. Can someone please assist me with this error warning: next-dev.js?3515:20 Warning: va ...

css - adjust flex box to cover half of the screen and increase its size

I'm having trouble getting my CSS Flex-box to stretch the full height of the right side of the screen from the center. I want it to cover the entire right half of the screen at full height. https://www.cajsoft.co.uk/test/visitor2.html Any help with m ...

Having trouble setting up a page layout with CSS grid or grid-template-areas

Hey everyone, I'm a beginner in the world of HTML, CSS, and JS and this is my first time reaching out for help. I've been searching through various forums and spending quite some time on this particular issue, but unfortunately, I haven't fo ...

Determined margin value to replicate the maximum and minimum margin in CSS styling

When attempting to set the margin on an object to 20% with a maximum margin of 200px, I experimented with various methods: margin-left: calc(min(200px, 20%)); and max-margin-left: 200px However, neither property proved to be valid. Is there an alterna ...

Issue with CSS background color not extending to full screen in webkit browsers when using 960.gs grid system

When using 960.gs, I have created a login screen with a div for the login form that has a background image. This div is positioned below a header, which centers it in the browser window. In my CSS, I am setting the body color as follows: body { backgr ...

Header and footer on iPad are not extending to full width even when set to 100% width

Upon viewing this link on an iPad, you may observe that the header does not span the full width of the page, leaving a noticeable pixel gap on the right side. The same issue is present with the footer. It is puzzling to me because both elements are set to ...

Looking to eliminate the vertical spacing of the <hr> tag?

Summary: For a quick solution, just click on the image at the bottom. Greetings to everyone! I am facing an issue with two <div> elements that I need to separate using a <hr class="separator"> element. Below is the CSS code for the ...

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

Safari on iOS 11.4 ignoring the 'touch-action: manipulation' property

I ran into an issue while developing a React web app that I want to work seamlessly across different platforms. My goal was to allow users to interact with a div element by double-clicking on desktop and double-tapping on mobile devices. However, when tes ...

Owl carousel issue: Fixed position not functioning properly

To view the page with the issue, click here I am attempting to make the column (div) day/date headers sticky when they scroll out of view so that users can always see what day they are looking at. Instead of directly manipulating the header itself, I have ...

Disable the functionality of the next and previous buttons for the Bootstrap carousel when clicking on the outer

Here is the code for the carousel: The next/prev button functions under its respective div, how can I stop it? When I click on the div below the carousel, the carousel continues to move as usual. Below the carousel div, there is another one with a tabbi ...

Turn off the automatic resizing of Internet Explorer 11 to fit the width of the viewport - IE11

Is there a way to stop Internet Explorer 11 from automatically zooming to fit the viewport width? I need the browser to respect my max-width rule and not scale the content to fill the entire width of the viewport on its own. This issue is happening in IE ...

How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link visit this webpage for the link I need I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted t ...

How can AngularJS focus on the last element using ng-repeat and md-focus?

, there is a code snippet that utilizes AngularJS ng-repeat directive to iterate through 'items' and 'md-autofocus' attribute to focus on the last element. The code is contained within an md-dialog with vertical scrolling functionality. ...

How can I use jQuery to vertically align an element?

Here's my website: Take a look here! I have a menu on the left column that I want to center. Take a look at the image below for a better understanding of what I'm trying to achieve. https://i.stack.imgur.com/ZzprT.png Here is the JavaScript c ...

Incorporating the fadeout technique in conjunction with the append() function

Here is some code that I am working with: $('body').on('click' , function(){ $('body').append('<div class="ajax-success"><p>Its Done !!!</p></div>').fadeOut(2000); }); The goal was to a ...

Create personalized styles for each item within a stack with specific spacing using the @mui library

Is there a way to change both the background color and spacing area when hovering over each item in my list? https://i.stack.imgur.com/87TST.png <Stack spacing={4} divider={<Divider variant={`fullWidth`} orientation={`horizontal`} flexItem/>}> ...

What is the best way to vertically align two divs on the left and right?

Having trouble aligning my dropdown list vertically with my textarea on the left. It seems like they are clashing together for some reason. UPDATE: Thank you for the assistance, I was able to make the necessary adjustments. JSP: .ExeDropdown{ float: ...