Python社区  »  Jquery

jquery下拉列表和文本框在ios chrome浏览器上不起作用

Vadzim Savenok • 1 周前 • 22 次点击  

我有一个非常基本的搜索页面,有下拉列表和文本框。

代码片段如下

<div class="container" style="width: 100%;">
   <div class="row">
        <div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
           <span class="input-group-addon" id="basic-addon2">Business Name</span>
           @Html.LabelFor(m => m.Parameters.BusinessName, new { style = "display: none;" }) 
           @Html.TextBoxFor(m => m.Parameters.BusinessName, new { @maxlength = 50, @class = "form-control", @placeholder = "Enter a business name", @aria_describedby = "basic-addon2", @style = "width:350px;" })
        </div>

        <div class="input-group col-sm-4 col-md-4" style="float: left; margin-bottom: 10px; max-width:0px;">
           @Html.LabelFor(m => m.Parameters.BusinessNameSearchType, new { style = "display: none;" }) @Html.DropDownListFor(m => m.Parameters.BusinessNameSearchType, searchtypes, new { @class = "form-control", @style = "width:150px;" })
        </div>
   </div>
</div>

How it looks on desktop, android tablet and android phone chrome browser

我使用bootstrap 3.3.5和jQuery 2.1.4。

当我使用Chrome作为浏览器时,它在桌面、android平板电脑和android手机上运行得非常好。

然而,当我尝试在新版iPhone ios浏览器上查看时,文本框和下拉框都会完全崩溃(崩溃为完全不可用)。

有趣的是,当我试图在Chrome中模仿iPhone X时,它也运行得很好。

我对整个ios主题都是全新的。做一些基础研究使我相信旧版本的bootstrap/jquery可能是问题所在。

尝试更新到bootstrap 4,这也导致将jquery更新到3.0.0,完全破坏了整个应用程序,所以我不得不将其还原回来。

在我深入讨论整个bootstrap/jquery之前,有谁能给我提供一些有用的提示,告诉我为什么ios如此挑剔?在我开始研究可能的解决方案之前,我想至少对问题有一个基本的了解。

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/54640
 
22 次点击  
分享到微博
文章 [ 1 ]  |  最新文章 1 周前
Raeesh Alam
Reply   •   1 楼
Raeesh Alam    1 月前

我在( 引导-4
第一次打破文本框和下拉移动。

您可以检查下面的代码片段。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="py-3">
  <div class="container l">
    <div class="row">
      <div class="col-md-12">
        <h5>Textbox & Dropdown (Break on Mobile Screen)</h5>
      </div>
      <div class="col-md-8 my-2">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">Business Name</span>
          </div>
          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
        </div>
      </div>
      <div class="col-md-4 my-2">
        <select class="custom-select">
          <option>Exact Match</option>
          <option>Option #1</option>
          <option>Option #2</option>
          <option>Option #3</option>
        </select>
      </div>
    </div>
    
    <br><br>

    <div class="row">
      <div class="col-md-12">
        <h5>Textbox & Dropdown (Not break on Desktop/Mobile Screen)</h5>
      </div>
      <div class="col-8 my-2 pr-1 pr-md-3">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">Business Name</span>
          </div>
          <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="Enter a business name">
        </div>
      </div>
      <div class="col-4 my-2 pl-1 pl-md-3">
        <select class="custom-select">
          <option>Exact Match</option>
          <option>Option #1</option>
          <option>Option #2</option>
          <option>Option #3</option>
        </select>
      </div>
    </div>
  </div>
</div>