在移动视图中，下拉选择框超出屏幕范围

Question

我有一个下拉选择框，在移动设备上显示不全。我使用的是bootstrap类form-control。我的代码如下：

<select name="service" formControlName="service" class="form-control shadow-none" style="width:100%">
      <option value="Select" selected>Select</option>
      <option value="Sedan" selected>Sedan</option>
      <option value="SUV" selected>SUV</option>
      <option value="Mini" selected>Mini</option>
</select>

非常感谢您的帮助...

- Savan Padaliya

---

如果您正在使用Chrome / Firefox浏览器查看它，那么不用担心，因为这只是模拟中的一个小错误。当它在移动视图中实际呈现时，它将具有您指定的正常属性。 - AKNair

@AKNair，我很担心它会出现意外情况。希望在实际渲染中能够正常工作。 - Savan Padaliya

Answer 1

这只是因为你在桌面浏览器中查看手机视图。

在真实设备中，这不会造成任何问题，并根据设备宽度调整宽度。

而且，在Android设备中，选项列表会以下拉列表的形式打开，在iOS设备中，它会像弹出窗口一样打开。

请尝试在真实设备中打开此页面，而不是在桌面浏览器的手机视图中查看。

我希望这个答案能够清除你所有的疑虑。

谢谢...

- KuldipKoradia

Answer 2

由于您使用了选择元素，因此每个手机操作系统都将使用其默认样式呈现项目列表。

iOS示例 链接

Android示例 链接

- Andreas Traganidas

Answer 3

您可以尝试在移动设备上使用媒体查询，并在加载到特定分辨率以下时为表单元素设置固定宽度： @media only screen and (max-width: 600px) { select { width: 200px !important; } }

- Kumar Abhishek

Answer 4

这是正常的。当您查看浏览器的移动模式时，会有一个机制清楚地显示您的选择和下拉菜单。当您使用真实的移动设备打开这些部分时，它们看起来会不同。

还有另一种方法可以管理此问题。也就是说，您将手动创建一个选择或下拉菜单，而不是使用select标记，而是使用其他标记。

- Vương Hữu Thiện

Answer 5

有时候，如果你在开发响应式网页应用程序时，会出现这些情况。这很可能是由于浏览器不兼容导致的异常行为。

我建议使用属性auto。

<select name="service" formControlName="service" class="form-control shadow-none" style="width:auto">
      <option value="Select" selected>Select</option>
      <option value="Sedan" selected>Sedan</option>
      <option value="SUV" selected>SUV</option>
      <option value="Mini" selected>Mini</option>
</select>

编辑： 尝试使用position: absolute和width: 100%。这应该将该div拉出容器。您正在要求一个元素比其父元素更宽，这通常不是推荐的做法。

- JadeAian

---

无论我是否给定宽度，它都不起作用。我只是在我的代码中尝试了一下，以展示我已经尝试过给定宽度。 - Savan Padaliya

尝试使用position: absolute和width: 100%将该div放在容器外部。您正在要求元素拉伸比其父级更宽，这通常不是推荐的做法。 - JadeAian

Answer 6

尝试使用除Chrome以外的其他浏览器，错误将会得到解决。

- user18782865

---

你的回答可以通过提供更多的支持性信息来改善。请编辑以添加进一步细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community