I have a bootstrap modal on a page in my Rails application as follows:
<div class='modal-dialog'>
<div class='modal-content'>
<div class="modal-header">
Sign In
</div>
<div class='modal-body'>
<div id="sign-in-errors" class="alert alert-error"></div>
<%= form_for User.new, as: :user, remote: true, url: create_new_session_path, html: { id: 'sign-in-form' } do |f| %>
<div class="form-group">
<%= f.label :email, 'Email' %><br />
<%= f.email_field :email, autocomplete: "off", class: 'form-control' %>
</div>
<div class="form-group">
<%= f.label :password, 'Password' %><br />
<%= f.password_field :password, autocomplete: "off", class: 'form-control' %>
</div>
<div class="form-group">
<%= f.check_box :remember_me %>
<%= f.label :remember_me, 'Remember Me', class: 'sign-in-remember-me-label' %>
</div>
<div class="form-group">
<%= f.submit 'Sign In', class: "btn btn-blue btn-block btn-accounts sign-in-button pull-left" %>
<%= link_to 'Cancel', "#", type: :reset, class: "btn btn-default btn-accounts pull-right cancel-button", "data-dismiss": "modal", "aria-hidden": "true" %>
<br/><br/>
<div class='forgot-password'>
<%= link_to 'Forgot Password', recover_password_path %>
</div>
</div>
<% end %>
</div>
</div>
</div>
On my iPhone 6, the modal works fine in portrait mode (vertical orientation) but when i switch the phone to landscape mode (horizontal orientation) the modal does not scroll, just the background scrolls, because of which im unable to see the 'Forgot Password' link in the modal in landscape mode on my iPhone 6.
I am using the following css for the modal
.modal-header {
background-color: #F0F0F0;
}
.modal-content {
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
I checked on Android phone and the modal scrolls fine in both portrait and landscape mode. How can i make it scroll normally in landscape mode on iPhone ?
