【问题标题】:Select Search bar disappear in small screen选择搜索栏在小屏幕中消失
【发布时间】:2021-09-05 10:53:10
【问题描述】:

我已经构建了通过搜索栏搜索 ID 的表单, desktop view

当我将视图转到手机屏幕时,搜索栏消失了。

small screen iphone screen

我的代码:

  <label for="supervisor"> </label>
  <br>
  <select  id="supervisor" class="chosen" onchange="getSuper(this.value)" required >
    <option disabled selected value>-</option>
    <option  value="ID3357">ID3357</option>
    <option  value="ID2695">ID2695</option>


  </select>

自动完成搜索 jquery

  <script type="text/javascript">
    $(".chosen").chosen();
  </script>

我转发此视频以添加搜索栏:https://www.youtube.com/watch?v=d-gAPYRLMeI

【问题讨论】:

  • 你对不同的视图使用不同的 CSS 吗?你能分享你的 CSS 的相关部分吗?

标签: javascript html css search responsive


【解决方案1】:

对不同宽度使用 css 媒体查询,例如

// 小型设备(横向手机,576px 及以上) @media(最小宽度:576px){ ... }

// 中型设备(平板电脑,768px 及以上) @media(最小宽度:768px){ ... }

// 大型设备(台式机,992px 及以上) @media(最小宽度:992px){ ... }

// 超大型设备(大型桌面,1200px 及以上) @media(最小宽度:1200px){ ... }

根据您的设备宽度应用它们并在它们之间应用不同的功能

【讨论】:

    【解决方案2】:

    我改变了JS函数, 请点击此链接解决问题或在下拉菜单中添加(小屏幕)搜索栏

    https://select2.org/getting-started/basic-usage

    【讨论】:

    • 请添加更多详细信息以扩展您的答案,例如工作代码或文档引用。
    猜你喜欢
    • 1970-01-01
    • 2018-03-05
    • 1970-01-01
    • 1970-01-01
    • 2021-04-26
    • 1970-01-01
    • 1970-01-01
    • 2019-02-01
    • 2011-02-16
    相关资源
    最近更新 更多