携帯電話のフォームフィールドはクリックできません

Question

ここにはウェブサイトがあります：http://www.hotelsunlimited.tech/ ここには問題があると思われるコードがあります。問題は小さな画面で、デモをリクエストしてクリックするとフィールドがクリックできなくなるときです... 問題はどこかのZ-indexについてだと思います。ほとんどすべての投稿/方法を試しましたが、解決できませんでした。

<div id="requst_demo" class="modal fade in" role="dialog" style="display: block; padding-left: 0px;"> 
      <div class="modal-dialog"> 
       <!-- modal content start --> 
       <div class="modal-content"> 
        <div class="modal-header bg-gray"> 
         <button type="button" class="close" data-dismiss="modal">×</button> 
      <script type="text/javascript">var submitted=false;</script> 
      <h5 class="modal-title text-center" id="requestDemoDisplay"><!-- <i class="fa fa-lock fa-fw"> --> Request Demo</h5> 
     </div> 
     <div class="modal-body_bg col-md-12"> 
     <div class="contact contact-us-one"> 
     <div class="col-sm-12 col-xs-12 text-center mb20"> 
     <h4 class="pb25 bb-solid-1 text-uppercase"> 
     Help us to Reach You 
      <small class="text-lowercase">Please complete the form and we will get back to you.</small> 
     </h4> 
     </div> 
     <iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){$('#inputInfo').hide();$('#requestDemoDisplay').hide();$('#successMessage').show();}"> </iframe> 
     <form name="contactForm" id="ss-form" action="https://docs.google.com/forms/d/17hNuB00okyMsEvvNrirQCZzZtwEEGmF1trFfBIwvKgI/formResponse" target="hidden_iframe" onsubmit="submitted=true" method="POST"> 
     <div id="inputInfo"> 
     <!-- fullname start --> 
     <div class="col-md-6 col-sm-6 col-xs-12"> 
     <div class="form-group"> 
     <input type="text" name="entry.301789256" id="entry_301789256" class="input-md input-rounded form-control" placeholder="Fullname" maxlength="100" required=""> 
     </div> 
     </div> 
     <!-- fullname end --> 
<!-- email start --> 
<div class="col-md-6 col-sm-6 col-xs-12"> 
<div class="form-group"> 
    <input type="email" name="entry.1752605527" id="entry_1752605527" class="input-md input-rounded form-control" placeholder="Work Email-ID" maxlength="100" required=""> 
</div> 
</div> 
<!-- email end --> 
    <!-- textarea start --> 
<div class="col-sm-12"> 
<textarea class="form-control" name="entry.1630854875" id="entry_1630854875" placeholder="Any Question" rows="7" required=""></textarea> 
</div> 
<!-- textarea end --> 

<!-- button start --> 
<div class="col-sm-12 mt10 text-center"> 
<button type="submit" value="Submit" name="sendMessage" id="sendMessage" class="button button-md button-block button-grad-stellar">Send Message</button> 
       </div> 
       <!-- button end --> 
        </div> <!---end of inputInfo--> 
      <div id="sendingMessage" class="statusMessage sending-message"> 
      <p>Sending your message. Please wait...</p> 
      </div> 
      <div id="successMessage" class="statusMessage success-message"> 
      <p>Thanks for sending your message! We'll get back to you shortly.</p> 
      </div> 
      <div id="failureMessage" class="statusMessage failure-message"> 
      <p>There was a problem sending your message. Please try again.</p> 
      </div> 
      <div id="incompleteMessage" class="statusMessage"> 
      <p>Please complete all the fields in the form before sending.</p> 
        </div> 
      </form> 
     <div id="successMessage2" class="statusMessage success-message"> 
     <p>Thanks for sending your message! We'll get back to you shortly.</p> 
             </div> 
         </div><!-- div contact end --> 
        </div><!-- col end --> 
       </div> 
       <!-- modal content end --> 
      </div> 
     </div> 

Answer 1

私はインスペクタで以下の変更を適用し、そのトリックを行いました。問題がある場合は教えてください。

は、上記の行は、外観ではなく、テキスト入力問題を修正し、次のCSS

.modal-dialog, .modal-content{height: 100%;} 

を追加します。 次の行は、以下のテキストエリアが含まれている列は最初の二つの入力フィールドをカバーするように、その限界の上方に延びているからである

#inputInfo .col-sm-12{clear: both;} 

応答しない入力欄を修正します。