0

I'm using Ruby on Rails 5 and Material-Kit (Material Kit is a Bootstrap UI Kit with new design inspired by Google's material design). When I reload the sign-in page it works perfectly: Photo sign in page: realoading the page

But when I arrive there navigating and not realoding the page, this is how it looks like: Photo sign in page: not realoding the page

The checkbox disappearing is not the only difference. The floating labels don't work properly either without reloading the page.

This is the code in "app/views/devise/sessions/new.haml":

.row.top-padding.center-content.height-100.width-100
  .col-xs-10.col-sm-6.col-lg-4.no-padding
    .box.center-xs
      %h1 Log in
      = form_for(resource, as: resource_name, url: session_path(resource_name)) do |f|
        = devise_error_messages!
        .form-group.label-floating.text-left
          = f.label :email, class:"control-label"
          = f.email_field :email, autofocus: true, class:"form-control"
        .form-group.label-floating.text-left
          = f.label :password, class:"control-label"
          = f.password_field :password, autofocus: true, class:"form-control"
        -if devise_mapping.rememberable?
          .checkbox.text-left
            %label
              = f.check_box :remember_me
              = "Remember me"
        .top-space.width-100
          .row.text-left.middle-xs.center-xs.width-100
            .col-xs-12.col-md-6
              =f.submit "Log in", class:"btn btn-primary"
        .width-100
          .row.text-left.middle-xs.center-xs.width-100
            .col-xs-12.col-md-6.top-space
              =link_to "Sign in with Google", user_google_oauth2_omniauth_authorize_path, class: "btn-oauth-google btn no-margin"
            .col-xs-12.col-md-6.top-space
              =link_to "Sign in with Facebook", user_facebook_omniauth_authorize_path, class: "btn-oauth-facebook btn no-margin"
      .top-space
      =render "devise/shared/links"
.footer-margin-bottom

I've searched on the Internet and all I saw is for people using Material Design lite (which is not my case) to include this peace of code (and I've tried just in case it could also work for my case, but it didn't):

document.addEventListener('turbolinks:load', function() {
  componentHandler.upgradeDom();
});

Thanks! :)

Marta
  • 25
  • 2
  • 9
  • You can try this fix for turbolinks issues: http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links – sump Aug 03 '16 at 15:57
  • Thanks for helping :) From what I saw from that page, what made it work is the comment by Alan who suggests disabling turbolinks for that link in particular and that works fine. – Marta Aug 07 '16 at 10:23

0 Answers0