I use algolia autocomplete in my application. And I would like to create a search bar that extends, as an extensible example on this page . I have a layout with a title bar that has a search for large screens. On small screens, I only have a magnifying glass icon that, when clicked, toggles another title with the search bar, which I originally hid. Here is a fiddle that I could not get, but I hope that it will give you an overview anyway. This is the layout:
<header class="mdc-toolbar mdc-toolbar--fixed toolbar--custom"> <div class="mdc-toolbar__row"> <section class="menu mdc-toolbar__section mdc-toolbar__section--align-start"> <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a> <span class="mdc-toolbar__title">Title</span> </section> <section class="mdc-toolbar__section"> <form action="/search" method="get" class="search-field-desktop"> <div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon autocomplete-search-field"> <i class="material-icons mdc-text-field__icon" tabindex="0">search</i> <input name="q" type="text" class="mdc-text-field__input search-input-js aa-input-search" placeholder="Search for players and videos ..." aria-label="Full-Width Text Field"> </div> </form> </section> <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar"> <a href="#" id="search-input-open" class="material-icons mdc-toolbar__icon" aria-label="Search" alt="Search">search</a> <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Login" alt="Login">more_vert</a> </section> </div> </header> <header class="search-field-phone mdc-toolbar mdc-toolbar--fixed toolbar--custom"> <div class="mdc-toolbar__row"> <a id="search-input-close" class="material-icons mdc-toolbar__menu-icon" tabindex="0">arrow_back</a> <form action="/search" method="get"> <div class="mdc-text-field mdc-text-field--box autocomplete-search-field"> <input name="q" type="text" class="mdc-text-field__input search-input-js aa-input-search" placeholder="Search for players and videos ..." aria-label="Full-Width Text Field" autofocus> </div> </form> </div> </header>
The problem is that the dropdown menu is not visible on small screens for some reason and on large screens. This is scss / css:
.algolia-autocomplete { display: flex!important; flex: auto!important; height: 100%; } .aa-dropdown-menu { position: relative; top: -6px; border-radius: 3px; margin: 6px 0 0; padding: 0; text-align: left; height: auto; position: relative; background: $white; border: 1px solid
The layout of the entire page is as follows:
<div id="app"> @include('layouts.partials.sidebar') @include('layouts.partials.navigation') <div class="page-content"> @yield('content') </div> </div>
In cases where part of the navigation is a file with the headers shown above. This is a partial sidebar :
<aside class="mdc-drawer mdc-drawer--temporary mdc-typography"> <nav class="mdc-drawer__drawer"> <header class="mdc-drawer__header"> <div class="mdc-drawer__header-content"> Header here </div> </header> <nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list"> <a class="mdc-list-item mdc-list-item--activated" href="#"> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox </a> <a class="mdc-list-item" href="#"> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star </a> </nav> </nav> </aside>
This is the css for the page:
body { margin: 0; } #app { display: flex; } .page-content { display: inline-flex; flex-direction: column; flex-grow: 1; height: 100%; box-sizing: border-box; }
I'm not sure what causes this behavior, why is the dropdown menu for large screens visible and the other for smaller screens?
Update
I noticed that when I opened the search input on small screens, if I delete search-field-phone-open , then the dropdown menu is visible, I’m not sure in this class that the dropdown menu is not visible?
.search-field-phone-open, { visibility: visible; @include search-animated-open; .mdc-text-field { @include search-animated-open; } }