Topic: Autocomplete dropdown has 0 width
We have a page to check out the rendering and performance of various form inputs.
On this page, we have an autocomplete form input that is generated dynamically.
The HTML that is on the page for the autocomplete, after calling new mdb.Input( element ).init(), on it becomes:
<div class="form-outline autocomplete">
<input aria-describedby="f-116-typeahead-help" aria-labelledby="f-116-typeahead-label" autocomplete="off" class="form-control" data-context-id="771751937" data-filter-group-id="0" data-hidden-input-selector="#f-116" data-typeahead="" data-url="service/Typeahead" id="f-116-typeahead" name="f-116-typeahead" type="text">
<label id="f-116-typeahead-label" class="form-label" for="f-116" style="margin-left: 0px;">Typeahead label</label>
<div class="invalid-feedback mb-3">Placeholder</div>
<div class="form-notch">
<div class="form-notch-leading" style="width: 9px;"></div>
<div class="form-notch-middle" style="width: 100.8px;"></div>
<div class="form-notch-trailing"></div>
</div>
<div id="f-116-typeahead-help" class="form-text mb-3">Typeahead description</div>
We then initialize the autocomplete on the form-outline element by calling -
new mdb.Autocomplete( element, autocompleteOptions );
We have JS code that pulls the list asynchronously from our service and all of that works. However when MDB autocomplete tries to display the dropdown, the dropdown is given a width of zero (0). The dropdown list is there, and I can use Chrome inspector to see that it is there... but since the width is 0, the list is essentially invisible to the user.
On the same page, we also have a select form input, and the dropdown displays properly for that input. I am not sure why the dropdown for the autocomplete is not working correctly - what could be causing the width to be set to zero?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 3.2.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 4 years ago
I have seen such a case before. Back then, autocomplete was not visible during initialization. It was set to
display: 'none'. Height is computed dynamically and autocomplete must be visible to be able to check and calculate the height of the elements. Does it looks similar for you?Marvin Herbold pro premium priority commented 4 years ago
Hello - I shifted around some code and deferred the new mdb.Autocomplete() until after the modal is shown. The autocomplete is being shown inside of a modal. The dropdown for the autocomplete now works. However, this begs the question - why does the dropdown for select work, even if the new mdb.Select() is done before the modal is shown? I have both autocomplete and the select box in the same modal in my test. I assume both the select and the autocomplete inputs use the same mdb dropdown menu system. Would it be possible to fix autocomplete so it can successfully initialize the dropdown before the modal is shown, like how select does it?
Grzegorz Bujański staff commented 4 years ago
With Autocomplete, it's more complicated. But we will try to solve this problem.