社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

Vadzim Savenok • 4 年前 • 292 次点击  

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

代码片段如下

<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
 
292 次点击  
文章 [ 1 ]  |  最新文章 4 年前
Raeesh Alam
Reply   •   1 楼
Raeesh Alam    4 年前

我在( 引导-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>