How to use with Olivero's dropdown search bar?

Hi !

I did not forgot you, but I did not either find a way at the moment. I will let you know.

Hi Dom!

I "fixed" this for one of my sites with the following. Note: I ripped this straight from an internal ticket, so if anything doesn't make sense just let me know!

I've added initial CSS code to make the autocomplete dropdown work with the Olivero theme search block, and included it below.

Next Steps

• The code isn't particularly pretty, so it needs to be assessed for any potential improvements.
• The code then needs to be added to the Timbers Module? I'm guessing that's the best standard place to put it, unless there's another suggestion - some location to bundle our Olivero/Claro theme overrides and additions.
• Whatever module this code is added to would need a note and additional code for the dependency on the autocomplete module.
• Let's add some easy UI customization options such as:
• Colors
• Headings alignment (left/center/right)
• Results alignment (left/center/right)
• anything else?
• Assess if/what other settings we need to add to make this work or disable it for responsive.
• Please test on standard tablet and mobile sizes

Testing

Let's implement and test these changes/updates first.

Code

/* Search overrides and styling */
.search-block-form .search-form .ui-menu .ui-state-focus,
.search-block-form .search-form .ui-menu .ui-state-active {
margin: 0;
}
.search-block-form .block-search-wide__wrapper {
overflow: visible;
}
.search-block-form .search-form > ul {
display: block !important;
visibility: hidden;
max-height: 0;
width: auto !important;
top: inherit !important;
bottom: 0;
overflow: hidden;
transform: translateY(calc(100% + 1px));
transition: max-height .3s .2s;
}
.search-block-form .is-active .search-form > ul {
visibility: visible;
max-height: 40rem;
}
.search-block-form .search-form > ul[data-sa-theme="basic-blue"] a.ui-menu-item-wrapper,
.search-block-form .search-form > ul[data-sa-theme="basic-blue"] a.ui-menu-item-wrapper.ui-state-active {
border-bottom: 0;
}
.search-block-form .search-form > ul > .ui-autocomplete-field-group {
color: #fff;
background-color: #7e0e00;
}

Hi!

Thanks @W01F for this excellent share. Using it, I was able to write a patch for Olivero.
It works well on Drupal10, but I experience some little quirks with Drupal9.

Will be added to release 3.0

Automatically closed - issue fixed for 2 weeks with no activity.