Vue Instantsearch :: Seperated Div

I’ve got to be missing something.

Can anyone advise how to get rid of the block on the right? I simply want the search box display the full width and some reason (I can’t figure out why) it’s compacted in the block on the left.

     <ais-instant-search :search-client="searchClient" index-name="brands_index">
        <ais-configure :hitsPerPage="5" />
          <div slot-scope="{ indices }">
              placeholder="Type your brand name here..."
            <v-autocomplete label="Components" :items="components"></v-autocomplete>

Hi @jason4, trying to reproduce in a template sandbox, I don’t see the issue happening, so I think it must be something going on with the v-col / v-row .

Would you mind reproducing by forking / editing the sandbox above so we can take a closer look?


I found it!

When I saw your sandbox working, I started just eliminating code. I found this one style that I must have copied in way back. Was causing InstantSearch to create two columns.

.ais-InstantSearch {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;

Thanks @maria.schreiber!

1 Like