【问题标题】: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 的空间,这就是我拥有它的原因。
            猜你喜欢
            • 1970-01-01
            • 2020-01-18
            • 1970-01-01
            • 2013-04-11
            • 1970-01-01
            • 1970-01-01
            • 2015-08-24
            • 2019-09-30
            • 2016-08-09
            相关资源
            最近更新 更多