search

Blazored / Typeahead

Typeahead control for Blazor applications
https://blazored.github.io/Typeahead/
MIT License
446 stars 103 forks source link

Typeahead result mixing with text on the page #105

Closed ironbull45 closed 4 years ago

ironbull45 commented 4 years ago

I'm using Blazored Typeahead in the MainLayout.razor so it appears globally at the top of the page.

Whenever I have a long result the text from the result collides with the text on my page. I've tried lowering the Z-index on the page components. Sometimes this has worked, sometimes it doesn't. When the collision occurs, it presents a jumbled looking result & also prevents selection.

Is there a global way of handling this?

chrissainty commented 4 years ago

Could you provide a screenshot of what this looks like? I'm having trouble visualising it :)

ironbull45 commented 4 years ago

unfortunately, the data is sensitive. Let me see if I can come up with test data.

ironbull45 commented 4 years ago

I thought of a way to obscure the data.

So here is the first photo that show the page without values:

screen_without_values

Then, the results from a Typeahead which shows the results jumbled with the labels on the page:

autocomplete_overlapping_text

chrissainty commented 4 years ago

Thanks for the screenshots, made things much easier.

Do you have any special styling on your labels? Have you tried adjusting their z-index, just to see what happens?

ironbull45 commented 4 years ago

I drove myself crazy with z-index on different divs. I found this on the Telerik site even though I'm not using a Telerik control for this issue:

https://docs.telerik.com/blazor-ui/troubleshooting/general-issues

I ended up putting my div in a bootstrap Card & set the z-index to a negative number & that worked. I'll isolate the issue when I have more time. Thanks!