I've implemented algolia autocomplete in my application and I'm trying to create a search bar that expands similar to the example on this page. My app's layout includes a header bar with a search input for larger screens, while smaller screens only show a magnifying glass icon. Clicking the icon reveals another header containing the search bar, initially hidden. I've created a fiddle to provide an overview, although it's not fully functional. Here is a snippet of the layout:
<header class="mdc-toolbar mdc-toolbar--fixed toolbar--custom">
<div class="mdc-toolbar__row">
[...]
@keyframes close {
[...]
}
The complete page layout looks like this:
<div id="app">
[...]
</div>
The issue I'm facing is that the dropdown menu is visible on bigger screens but not on smaller screens. Below is the associated CSS:
.algolia-autocomplete {
[...]
}
I noticed that removing the search-field-phone-open class makes the dropdown visible on small screens. I'm unsure what within that class is causing the dropdown to be hidden. Here's the problematic section of the code:
.search-field-phone-open, {
[...]
}