Materialise 芯片自动完成下拉宽度
Materialize chip autocomplete dropdown width
我在尝试这个任务时变得疯狂了:
我有一个模态宽度 75%,它有一个输入
<div id="pippo" class="chips chips-autocomplete"></div>
<label for="pippo">Scope</label>
基本上我想让用户根据自动完成获得要使用的芯片的指示。
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: tags,
limit: Infinity,
minLength: 1}
});
尽管如此,我的下拉内容带有 120px 的宽度,太窄了,我找不到如何放大或取消约束。
是的,我也试过 $('.dropdown-trigger').dropdown({constrainWidth:false})
但运气不好(我猜它适用于普通下拉菜单但不适用于自动完成的下拉菜单?)
有谁知道解决方案?
请在此处查看问题图片:
这里你看到一个fiddle的问题:fiddle
非常感谢
洛伦佐
您需要使用 !important
标志来覆盖,因为 css 通过 Javascript:
内联应用
.dropdown-content {
width:200px !important;
}
我在尝试这个任务时变得疯狂了: 我有一个模态宽度 75%,它有一个输入
<div id="pippo" class="chips chips-autocomplete"></div>
<label for="pippo">Scope</label>
基本上我想让用户根据自动完成获得要使用的芯片的指示。
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: tags,
limit: Infinity,
minLength: 1}
});
尽管如此,我的下拉内容带有 120px 的宽度,太窄了,我找不到如何放大或取消约束。
是的,我也试过 $('.dropdown-trigger').dropdown({constrainWidth:false})
但运气不好(我猜它适用于普通下拉菜单但不适用于自动完成的下拉菜单?)
有谁知道解决方案?
请在此处查看问题图片:
这里你看到一个fiddle的问题:fiddle 非常感谢
洛伦佐
您需要使用 !important
标志来覆盖,因为 css 通过 Javascript:
.dropdown-content {
width:200px !important;
}