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.

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

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?

Thanks!

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