Search code examples
javascriptcssdrop-down-menuautocompletematerialize

Materialize chip autocomplete dropdown width

i am getting crazy in trying with this task: i have a modal width 75% which has an input 

        <div id="pippo" class="chips chips-autocomplete"></div>
        <label for="pippo">Scope</label>

where basically i want to have the user to get indications of the chips to use according to the autocomplete.

$('.chips-autocomplete').chips({
autocompleteOptions: {
  data: tags,
  limit: Infinity,
  minLength: 1}
});

nevertheless my dropdown content comes with width 120px, which is too narrow and i cannot find how to enlarge or unconstrain.

yes, i also tried $('.dropdown-trigger').dropdown({constrainWidth:false}) without luck (i guess it works on normal dropdowns but not the autocomplete ones?) does anyone knows the solution? please see here an image of the issue:

dropdown in the chips autocomplete

here you see a fiddle of the problem: fiddle thank you so much

lorenzo

Solution

  • You need to use an !important flag to override, as the css gets applied inline via Javascript:

    .dropdown-content {
  width:200px !important;
}