No idea to solve the location of dropdown list in Autocomplete

[kamyaw010]

I built an app for some purpose and get an autocomplete to handle some searching result, but the dropdown shows on top of the input box and can't see the input box (but both of them works like a charm).

I use flexbox in my CSS to handle the responsibility and use a LayoutHeader in the main page.

I works in Blazor Hybrid with Blazorise latest version.

I have not set an exact height and width for the container div or the LayoutHeader or the Autocomplete

I have no idea how to get the dropdown list locates in its correct place.

[David-Moreira]

Hello,

While not knowing exactly what you're doing.
Can you try to define the Autocomplete PositionStrategy? See if it helps?
Try PositionStrategy="DropdownPositionStrategy.Fixed"

If this does not help, please provide a reproducible of your problem! Thanks!

[kamyaw010]

I just wrote an AutoComplete component onto my layout and the result dropdown shows on the start position of the component and cover the input box, not render under the input box, I use flexbox in my css to auto-adjust the components, the code is just like:

razor file:

css:
.header { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; align-content: center; }

The dropdown shows in wrong location

Official renders dropdown like this

PositionStrategy not fixing this

[David-Moreira]

It might be something specific to what you're doing. Can you provide a reproducible of your issue?

[kamyaw010]

First, I add Layout like this into MainLayout, all Pages runs on this Layout

Then, I add a Layout like this to handle the LayoutHeader and set it to the MainLayout above, in this Layout I add just one AutoComplete component from Blazorise

After all, when I run the App, the AutoComplete shows the dropdown like this, no any changes, it always cover the input box, but functions are OK, just can't see what I have inputed

[David-Moreira]

I'm sorry, that still doesn't help, as it doesn't tell the whole story of how your app is actually setup. Style sheets being loaded, etc...
Please provide a github reproducible.
I recommend using one of our ready to go templates to quickly get started.
https://blazorise.com/docs/templates

[kamyaw010]

Thanks for replying, I read the documents carefully again from your latest reply and find out that I miss something of the template and quick start sections, and solve the issue by removing the Blazor default bootstrap.css reference and it works fine.

Thanks a lot