0

I am using devise gem with bootstrap3. I have designed my page with form-horizontal and center aligned. But the style is not correctly applied here. What mistake I am doing here?

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="panel panel-info">
        <div class="panel-heading">Sign in</div>
        <div class="panel-body">
          <%= simple_form_for(resource, :as => resource_name, :url => session_path(resource_name), :html => {:class => 'form-horizontal' },
            wrapper: :horizontal_form,
            wrapper_mappings: {
            boolean: :horizontal_boolean
            }) do |f| %>
            <div class="form-inputs">
              <%= f.input :email, required: false, autofocus: true %>
              <%= f.input :password, required: false %>
              <%= f.input :remember_me, inline_label: 'Yes, remember me', as: :boolean if devise_mapping.rememberable? %>
            </div>

            <div class="form-actions">
              <%= f.button :submit, "Sign in" %>
            </div>
          <% end %>

          <%= render "devise/shared/links" %>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
main {
  background-color: #fff;
  margin-top: 51px;
  padding-bottom: 80px;
 width: 100%;
}
</style>

Image

Sam
  • 5,040
  • 12
  • 43
  • 95

1 Answers1

0

I'm not sure if this is the best solution but you could easily add padding to the body exactly the same width of the scroll bar while it is hidden and that would eliminate the sliding. The following code is an example:

$('#thumbnailCarousel').mouseover(function() {
  $('body').css('overflow-y','hidden');
  $('body').css('padding-right', '17px');
});
$('#thumbnailCarousel').mouseleave(function() {
  $('body').css('overflow-y','scroll'),
  $('body').css('padding-right', '0px');
});

See This Working: http://jsfiddle.net/2gkn9/1/

...with dynamic scroll bar width: http://jsfiddle.net/2gkn9/2/

NOTE - This of course isn't complete because the width of the scroll bar is going to change between browsers and across devices. So, you'll want to make sure you get the width of the scroll bar dynamically. The first solution I found for that was here: How can I get the browser's scrollbar sizes?

Hope that helps!

jsboot
  • 11