How to get rid of "max-width" on search box

My search box will not get any wider than about 1/3 of the page as I walk through the instant search getting started demo.

When I inspect I find that the search-box.scss has a max-width of 300px. When I uncheck this, it works. Where can I find search-box.scss? It is not in my CSS folder.

image

Hi @jake.k.klinvex,

First of all, happy new year! :slightly_smiling_face:

This CSS rule come from the instantsearch.min.css that you load with InstantSearch. You can override the value with two different approaches. The first one consist of override the property in your CSS file by targeting the selector.

.ais-search-box {
  max-width: none;
}

The second one is to customize the className of the widget with the cssClasses option. You can find more details about that in our documentation.

// In your JS file
const SearchBox = instantsearch.widgets.searchBox({{
  container: '#searchbox',
  cssClasses: {
    root: 'ais-search-box-custom',
  },
});

// In your CSS file
.ais-search-box-custom {
  max-width: none;
}

Hope that helps, let me know if you have questions :wink:

1 Like

Awesome! Thanks Samuel. I moved the instantsearch style sheet into my local files and it worked perfectly. Thank you!