mercredi 3 août 2016

Bootstrap checkbox disappears in Ruby on Rails when the page changes

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! :)




Aucun commentaire:

Enregistrer un commentaire