How to add set height to Auto Complete and increase the font size of post titles

To make autocomplete have a set height instead of bleeding off the page when a lot of post show up add this to
/wp-content/plugins/search-by-algolia-instant-relevant-results/assets/css/algolia-autocomplete.css

Change the first line .algolia-autocomplete to

.algolia-autocomplete {
    z-index: 999999 !important;
    max-height: 80%; /* Feel free to adjust */
    overflow: scroll;
    
}

You can adjust the percentage of the height to whatever you want it to be. To change the font size of post title change .autocomplete-header to

 .autocomplete-header {
            font-size:25px;
        }

Again change the font size to whatever you want it to be. I am still trying to figure out how change the width of the autocomplete whenever I do I will post it here

2 Likes

Thanks for sharing the tip @jordanmulkey! Can you use the </> icon to format the source code in your post. Thanks!

1 Like

Thanks a lot @jordanmulkey for taking the time to share the answer here.
Valuable for other users!

To set the width of the autocomplete and have set height switch .algolia-autocomplete to this code

.algolia-autocomplete {
        z-index: 999999 !important;
        height: 80%; /* Feel free to adjust */
        width:400px;
    }
1 Like

Np man amazing plugin I love helping out the community any way that I can!

2 Likes