物化选择如何将约束宽度设置为假答案

【问题标题】：Materialize select how to set constrain width to false物化选择如何将约束宽度设置为假
【发布时间】：2016-06-24 18:46:03
【问题描述】：

我们如何使物化选择下拉选项的宽度不受限制？现在它们的宽度与控件和包装的文字相同。 http://www.codeply.com/go/unDArvEuR0 html:

<div class="input-field col s1">
    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1 longgggg tesxtas dsada</option>
      <option value="2">Option 2 asd  very longggg</option>
      <option value="3">Option 3</option>
    </select>
  </div>

Js： $('select').material_select();

【问题讨论】：

标签： material-design materialize

【解决方案1】：

在选择下拉菜单上设置min-width 也可以是一个快速的临时修复。下拉列表被编码为不给 inline style width 小于 min-width 。

【讨论】：

【解决方案2】：

如果你想禁用宽度约束，你可以用下面的JS代码来实现（只需在material_select调用之后添加它）

$('select').siblings('input').attr("data-constrainwidth", false);

设置本身来自http://materializecss.com/dropdown.html，但出于某种原因，只有一个按钮的文档。然而，通过这个 JS 调用，您可以在 select

上实现相同的功能

【讨论】：

【解决方案3】：

这将使物品不被包裹并且容器会展开以适合物品：

ul.select-dropdown,
ul.dropdown-content {
  width: auto !important;

  li > span {
    white-space: nowrap;
  }
}

【讨论】：

【解决方案4】：

不是完全完美的答案，但更好。将下面的 css 类添加到您的项目中。

ul.select-dropdown,ul.dropdown-content{
    width:200% !important;
}

【讨论】：

【解决方案5】：

从您的选择中删除 col s1 类或使用它们。

【讨论】：

我希望基础下拉菜单只使用 s1 的空间，这就是我拥有它的原因。