i have a bootstrap modal which has a good amount of height due to it's lengthy content inside, which need to be scrolled in the mobile devices to see the entire content and the button towards the bottom.
It's working fine in the normal screen zoom. where in iphone safari, if i pinch-zoom the screen a little, modal will not be scrolled and seems the entire screen is totally blocked so that it need a page refresh to do anything more in the page.
Also i checked with the sample modals in Bootstrap site as well, which also has the same issue.
the modal code i use is,
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div id="createAccount" class="modal fade in" role="dialog" novalidate="novalidate" style="display: block; padding-right: 17px;">
<div class="modal-dialog">
<div id="CreateAccLoader" style="display:none;"><img src="/scbt-static/assets/images/ajax-loader.gif"></div>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">
Create a new account
</h4>
<div id="errorMessage" style="display: none">
<p class="success-msg clearfix error-msg" style="display: none;">
<span class="glyphicon glyphicon-warning-sign pull-left"></span>
<span class="pull-left col-xs-11 padding-zero">
Email Id already exist, Please enter a valid new emaild
<a class="hide-message">Hide</a>
</span>
<span class="glyphicon glyphicon-remove pull-right hide-msg hide-message"></span>
</p>
</div>
</div>
<div class="modal-body">
<div class="clearfix">
<div class="col-sm-6">
<p>
*
Required fields
</p>
<form id="signInForm" method="post" class="form-horizontal" data-toggle="validator" role="form" novalidate="novalidate">
<h4>PERSONAL INFORMATION</h4>
<div class="two-col-error clearfix">
<div class="form-group col-sm-7 first-slot">
<div class="errorTxt">
<span id="signinErrNm1"></span>
</div>
<label class="control-label" for="firstname">First Name*</label> <input name="fname" type="text" class="form-control" id="firstname" data-error="#signinErrNm1" data-msg-required="Missing or empty value supplied for first name" required="" placeholder="First Name" maxlength="50" aria-required="true">
</div>
<div class="form-group col-sm-7 pull-right">
<div class="errorTxt">
<span id="signinErrNm2"></span>
</div>
<label class="control-label" for="lastname">Last Name*</label> <input name="lname" type="text" class="form-control" id="lastname" data-error="#signinErrNm2" data-msg-required="Missing or empty value supplied for last name" required="" placeholder="Last Name" maxlength="50" "="" aria-required="true">
</div>
</div>
<div class="form-group">
<div class="checkbox custom-checkbox">
<input id="receiveEmailScbt" type="checkbox" value="" class="checkTick" checked="checked"><label>Sign Up for Santa Cruz Biotechnology news and announcements</label>
</div>
<div class="checkbox custom-checkbox">
<input id="receiveEmailScah" type="checkbox" value="" class="checkTick" checked="checked"><label>Sign Up for Santa Cruz Animal Health news and announcements</label>
</div>
</div>
<h4>
LOGIN INFORMATION
</h4>
<div class="form-group col-sm-12 login-email-id">
<div class="help-block with-errors col-sm-12"></div>
<div class="errorTxt">
<span id="signinErrNm3"></span>
</div>
<div class="errorTxt">
<span id="signinErrNm4"></span>
</div>
<label for="email">Email*</label>
<input name="email" type="text" class="form-control" id="emailId" data-msg-required="Missing or empty value supplied for Email" data-msg-customemail="Invalid Email Address. Please check." required="" data-error="#signinErrNm3" maxlength="150" aria-required="true">
</div>
<div class="two-col-error clearfix">
<div class="form-group col-sm-7 first-slot">
<div class="errorTxt"><span id="signinErrNm12" class="password-error"></span></div>
<label class="control-label" for="password">Password*</label>
<input name="password" data-msg-required="Missing or empty value supplied for password" type="password" data-msg-onenumberpswd="Password should contain at least one numeric character" data-error="#signinErrNm12" data-rule-minlength="8" maxlength="100" data-msg-minlength="Password should be at least 8 characters in length" class="form-control" id="password">
</div>
<div class="form-group col-sm-7 pull-right">
<div class="errorTxt"><span id="signinErrNm13" class="password-error"></span></div>
<label class="control-label" for="confirmPassword">Confirm Password*</label>
<input name="confirmpassword" type="password" required="" class="form-control" data-error="#signinErrNm13" id="confirmPassword" data-msg-required="Missing or empty value supplied for password" data-msg-equalto="The password you entered in the Password and Confirm Password Field is not matching" aria-required="true">
</div>
</div>
<button type="submit" class="btn btn-default btn-primary full-width" id="createAcctBtn">
CREATE ACCOUNT
</button>
</form>
</div>
<div class="col-sm-6">
<div id="janrainMsgBox" class="errorTxt">
<span id="janrainSignErr"><label id="janrainErrMsg1" class="error" for="pwd" style="display: none;"></label></span>
</div>
<div class="social-media-signin">
<h4>
USE YOUR SOCIAL NETWORK
</h4>
<p>
Create an account quickly and easily with your preferred social network account. You wonât have to remember an extra name and password
</p>
<i class="janrain-login-btn fa fa-fw fa-facebook pull-left" id="facebook"></i> <i class="janrain-login-btn fa fa-fw fa-twitter pull-left" id="twitter"></i> <i class="janrain-login-btn fa fa-fw fa-pinterest pull-left" id="pinterest"></i> <i class="janrain-login-btn fa fa-instagram pull-left" id="instagram"></i>
</div>
<div class="create-account-desc">
<h4>
Why create an account?
</h4>
<p>
Creating an account with us makes your shopping experience much easier and faster. You can save favorites,save cart, check order status and speed through checkout with saved addresses,payment methods and more.
</p>
</div>
<div class="clearfix">
<div class="create-account-btn-wrap">
<span>Already have an account?</span>
<button type="submit" class="btn btn-default loginbtnSignupPage login-btn">
LOGIN NOW
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Make the page not zoomable and this will fix it:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Also try:
body.modal-open {overflow: hidden;}