Ruby On Rails - styles not rendering properly

Question

I am migrating a frontend webpage to the rails environment. I have used the Material Design Lite library to style my form fields. I have defined two routes till now: /home and /home/new. The /home page has a link which leads to /home/new.

When using the link to go to /home/new, the floating labels in the form fields are not getting rendered. But when I directly go to /home/new by typing in the address bar, all the styles get rendered properly.

How to fix this issue?

home\index.html.erb

 <!DOCTYPE html>
<html lang="eng">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SMS scheduling site</title>
    <%= stylesheet_link_tag "home.style" %>
  </head>

  <body>
    <h1>Saved Campaigns</h1>


    <p> <%= link_to 'Create New Campaign', "/home/new" %></p>



  </body>
</html>

home/new.html.erb

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SMS scheduling site</title>

  <%= stylesheet_link_tag "mdDateTimePicker" %>
  <%= stylesheet_link_tag "style" %>



</head>

<body>
<div class="container-div">
  <!-- Colored FAB button with ripple -->
  <button id="fab" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
    <i class="material-icons">add</i>
  </button>

  <div class="demo-card-wide mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title" id="text-div">
      <h2 id="title-text" class="mdl-card__title-text">CAMPAIGN</h2>
      <br>
      <br>
      <span id="success">Success!</span>
    </div>
    <div class="mdl-card__supporting-text">
      <form action="#">

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="campaign-name">
          <label class="mdl-textfield__label" for="phone-number-receiver">Campaign Name</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="phone-number-receiver">
          <label class="mdl-textfield__label" for="phone-number-receiver">Phone Number for recipient</label>
          <span class="mdl-textfield__error">Input is not a number!</span>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text" id="start-date">
          <label class="mdl-textfield__label" for="start-date" id="start-date-label">Enter start date</label>
        </div>


        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text"  id="end-date">
          <label class="mdl-textfield__label" for="end-date" id="end-date-label">Enter end date</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text"  id="start-time">
          <label class="mdl-textfield__label" for="end-date" id="start-time-label">Enter time</label>
        </div>

        <div class="mdl-textfield mdl-js-textfield less-margin">
          <textarea class="mdl-textfield__input" type="text" id="sms-msg" rows="8" columns="40"></textarea>
          <label class="mdl-textfield__label" for="sms-msg">Text lines...</label>

        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <input class="mdl-textfield__input" type="text"  id="break-msg" value="1">
          <label class="mdl-textfield__label" for="break-msg">Number of Pages</label>
        </div>
      </form>
    </div>
  </div>
</div>



<%= javascript_include_tag "mdDateTimePicker" %>
<%= javascript_include_tag "app" %>
</body>

</html>

routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  get '/home', to: 'home#index'
  get '/home/new', to: 'home#new'
end

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>SmsScheduler</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" %>
    <%= stylesheet_link_tag "https://fonts.googleapis.com/css?family=Roboto+Mono" %>


  </head>

  <body>
    <%= yield %>
  </body>
</html>

application.js

//= require turbolinks
//= require_tree
//= require jquery
//= require jquery-ui
//= require moment
//= require material
//= require draggabilly.pkgd

application.css

/*
*= require_tree .
 *= require_self
 *= require jquery-ui
 *= require material
 */

Hi @Rimil Dey, that's not the Rails way of rendering a view. You must wrap all your common code into a layout (default is layouts/application.html.erb). And all your scripts goes into a manifest file (default is assets/js/application.js) and rails do it's concatenation, through a process called asset pipeline. You only need to include it (one file). Same thing with stylesheets. I recommend you first reading Layous and Rendering and Asset PIpeline and refactor your code. — luiscrjr
– luiscrjr, Commented Jan 16, 2017 at 11:53
hey thanks! I will go through them. Is that the reason the file get rendered differently everytime? — Rimil Dey
– Rimil Dey, Commented Jan 16, 2017 at 11:57
It's probably! But I suggest you to refactor your code first and give it a new try. — luiscrjr
– luiscrjr, Commented Jan 16, 2017 at 11:59
@mrlew - i refactored the code, and now its breaking even more. A lot of my functionalities are no longer working when accessed through the link on /home, but all is perfect when done through home/new — Rimil Dey
– Rimil Dey, Commented Jan 16, 2017 at 13:11

luiscrjr · Accepted Answer · 2017-01-19 20:00:46Z

1

Your new.html.erb and home.html.erb are views files that, when rendered, "fits" into the layout application.html.erb. The yield method is replaced with the file contents.

That said, you'll have to remove your <html><meta>... tags from your views.

Your files must be this way:

index.html.erb

<h1>Saved Campaigns</h1>
<p> <%= link_to 'Create New Campaign', "/home/new" %></p>

new.html.erb

<div class="container-div">
   <!-- ... -->
</div>

You'll have to put all your scripts into the application.js manifest and all your styles into application.css file, including the inner pages.

Some notes:

In application.css, *= require_tree . directive means it'll load every css file into that folder (app/assets/stylesheets). That means you don't need to load them individually (style.css, mdDateTimePicker.css...). You might want to move this directive to the last line (first, load vendor scripts, than, yours).
In application.js, you should add a point to the end of the require_tree, like this: //= require_tree .. And, also, move it to the last line (first, vendor, then, your scripts). This directive will load all files into that directory (app/assets/javascripts): mdDateTimePicker.js, app.js...

You can read more about sprockets syntax (gem that handles rails assets pipeline) here.

This is an attempt of trying to help you with the basics. Can't know more than that with the information you provided (no error message). You might try to debug your code with the console, network tab, check if the styles and scripts are beign loaded, check if the their order are correct. Also, check your generated source code (actually there are duplicated body, html tags...)

If you still still issues, you can post your whole code into a respository (github) and I can try to check it better.

EDIT

I checked your repo code and that behavior is happening because of turbolinks (check the docs). Basically turbolinks prevents the page of being refreshed by creating some "on the fly" ajax requests. But sometimes it breaks your code, mainly in libraries that doesn't handle turbolinks events. You might try to find some workaround, or, in order to make it work, you might just remove turbolinks from your project, by doing this:

1) In your application.html.erb, replace

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

with:

<%= stylesheet_link_tag    'application', media: 'all' %>
<%= javascript_include_tag 'application', %>

2) remove gem 'turbolinks', '~> 5' from your Gemfile.

3) remove //= require turbolinks from your application.js

Now it's fine!

edited Jan 19, 2017 at 20:00

answered Jan 16, 2017 at 16:27

luiscrjr

7,2783 gold badges28 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rimil Dey Over a year ago

I made the changes as you said. the problem persists - /home/new works fine, the moment I use the link on /home to go to /home/new, the styles aren't rendered properly. I am attaching my link to GitHub to that you can check the code properly: github.com/rimildeyjsr/sms-scheduler

luiscrjr Over a year ago

@RimilDey I updated my answer. I hope it helps. Your code now is in the "rails way".

Rimil Dey Over a year ago

Thanks a lot! It's working perfectly. This issue had me going on for days. And I learnt a lot form you. Thanks once again :)

Collectives™ on Stack Overflow

Ruby On Rails - styles not rendering properly

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related