Question

我们如何使物化选择下拉选项不受宽度限制？现在，它们具有与控件相同的宽度和包装的单词。 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();

Answer 1

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

Answer 2

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

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

Answer 3

这将使物品不包裹，容器展开以适合物品：

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

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

Answer 4

如果要禁用宽度约束，可以使用以下JS代码（只需在material_select调用后添加它）

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

设置本身来自http://materializecss.com/dropdown.html，但由于某种原因，只有按钮的文档。但是，通过此JS调用，您可以在选择

上实现相同的功能

Materialise选择如何将约束宽度设置为false

4 个答案: