Design issue with the bootstrap based form in iphone browser

Question

I have a blog page where user can post comments, comment form shows up as a bootstrap modal when user click on a link or button.

This website is designed in asp.net webform just in case information is helpful

Since i cant put all the code i have just put related code of the page with css & JS.

This form works fine on Desktop browser and also on samsung browser but same breaks on iphone.

Form has multiple fields for input Name, Email, Country, Comments etc

When i start to enter Name cursor show below the Name inputbox and when i enter email cursor show almost two row below the email input feild.. I am adding screen for reference and also Codepen link

1[ enter image description here ]2

I am not sure why it is breaking as i am not able to debut it in Iphone

<div class="modal fade in" id="commentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block;" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Comment</h4>
      </div>
      <div class="modal-body">

        <!--- UpdatePanel -->
        <div id="MainContent_UpdatePanel1">

          <!--- Code -HERE -->
          <div id="MainContent_pnlForm">

            <div class="comment-intro-w">
              <span id="MainContent_lblCommentMsg" class="txtLabelComment">All fields are mandatory.</span>
            </div>

            <div data-val-validationgroup="vgCommentForm" id="MainContent_vsCommentForm" class="validation-sum" data-valsummary="true" style="display:none;">

            </div>

            <div class="comment-fullname-w">

              <input name="ctl00$MainContent$txtCommentFullName" id="MainContent_txtCommentFullName" tabindex="1" class="txt-comment-fn" placeholder="Full Name" type="text">
              <span data-val-controltovalidate="MainContent_txtCommentFullName" data-val-errormessage="Name can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfv1" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
                data-val-initialvalue="" style="visibility:hidden;">Name can't be blank</span>
            </div>

            <div class="comment-email-w">

              <input name="ctl00$MainContent$txtCommentEmail" id="MainContent_txtCommentEmail" tabindex="1" class="txt-comment-fn" placeholder="Email" type="text">
              <span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Email can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
                data-val-initialvalue="" style="visibility:hidden;">Email can't be blank</span>
              <span data-val-controltovalidate="MainContent_txtCommentEmail" data-val-errormessage="Enter correct email" data-val-validationgroup="vgCommentForm" id="MainContent_revEmail" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RegularExpressionValidatorEvaluateIsValid"
                data-val-validationexpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" style="visibility:hidden;">Enter correct email</span>
            </div>

            <div class="comment-country-w">
              <select name="ctl00$MainContent$ddCountry" id="MainContent_ddCountry" tabindex="3" class="dd-comment-country">
            <option value="">Country</option>
            <option value="AF">Afghanistan</option>
            <option value="AL">Albania</option>

        </select>
              <span data-val-controltovalidate="MainContent_ddCountry" data-val-errormessage="Select Country" data-val-validationgroup="vgCommentForm" id="MainContent_rfvddC" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
                data-val-initialvalue="" style="visibility:hidden;">Select Country</span>
            </div>

            <div class="comment-message-w">
              <textarea name="ctl00$MainContent$txtCommentMessage" rows="5" cols="20" id="MainContent_txtCommentMessage" tabindex="4" class="txt-comment-msg" placeholder="Message"></textarea>
              <span data-val-controltovalidate="MainContent_txtCommentMessage" data-val-errormessage="Message can't be blank" data-val-validationgroup="vgCommentForm" id="MainContent_rfvmsg" class="dp-comment-validation" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid"
                data-val-initialvalue="" style="visibility:hidden;">Message can't be blank</span>
            </div>

            <div class="comment-anonymous-w">
              <span class="chk-anonymous"><input id="MainContent_cbAnonymous" name="ctl00$MainContent$cbAnonymous" type="checkbox"><label for="MainContent_cbAnonymous">I wish to be anonymous. Do not publish my name with my comment.</label></span>
            </div>

            <div class="comment-btnsave-w">
              <input name="ctl00$MainContent$btnSaveComments" value="Post Comment" onclick="ClientSideClick(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$btnSaveComments&quot;, &quot;&quot;, true, &quot;vgCommentForm&quot;, &quot;&quot;, false, true))"
                id="MainContent_btnSaveComments" class="buttonPopups" type="button">
            </div>

          </div>

          <!--- Code -HERE -->

        </div>
        <!--- UpdatePanel -->
      </div>
    </div>
  </div>
</div>

score 0 · Answer 1 · answered Nov 15 '17 at 05:45

I found the solution it seems to work .modal-open { position: fixed; width: 100%; }

It seems like a bug in iOS. Any other solution is welcome

Personally, position: fixed scroll to top automatically. Quite annoying !

To avoid penalizing other devices and versions I apply this fix only to the appropriate versions of iOS.

For the javascript/jQuery

$(document).ready(function() {

    // Detect ios 11_0_x affected 
    // NEED TO BE UPDATED if new versions are affected
    var ua = navigator.userAgent,
    iOS = /iPad|iPhone|iPod/.test(ua),
    iOS11 = /OS 11_0_1|OS 11_0_2|OS 11_0_3|OS 11_1/.test(ua);

    // ios 11 bug caret position
    if ( iOS && iOS11 ) {

        // Add CSS class to body
        $("body").addClass("iosBugFixCaret");

    }

}

For the CSS

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; width: 100%; }

Reference Source iOS 11 Safari bootstrap modal text area outside of cursor

Design issue with the bootstrap based form in iphone browser

1 Answers1