Turbolinks and css classes applied to html tags

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

Question

My HTML tags have classes defined to identify the correct layout. 

<html class="one-column">

This becomes an issue with Turbolinks as it only refreshes the body and title tags.

... it keeps the current page instance alive and replaces only the body and the title in the head.

This means the HTML class is not changing when I transition from pages with a one-column to pages with two-column classes.

How do I get around this? I can't apply the class names to the body.

Was it helpful?

Solution

The whole purpose of Tubolinks is not to load the entire DOM with every request. The html tag being at the top of the DOM, changing its attributes (e.g. class) means that its children should also be invalidated. So it kind of beats the purpose of Turbolinks. You can either disable Turbolinks entirely, as pointed out here, or you can move the class to the body, which should work. Why is it actually not possible for you to move it to the body?

OTHER TIPS

Why don't you change the layout?

The reason why you're current implementation isn't working is because it's a hack. CSS class styles are meant to style individual elements, not the whole page

What if the page is rendered without the <HTML> tag for some reason? Your styles would be defunct

Layouts

An extensible way to handle this will be to change the layout depending on what you're doing. Here's how I would do it:

#app/views/layouts/application.html.erb
<html>
    <!-- Default Styling Here -->
</html>

#app/views/layouts/action.html.erb
<html>
    <!-- Other Styling  -->
</html>

#app/controllers/your_controller.rb
layout "action", :only => [ :index, :show ]

Layouts are independent of Turbolinks (they are HTML), which means you can load them as many times as you need

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