Search code examples
javascripthtmldommaterialize

why is my element getting pushed off the page after js injects html?

I have made a simple search engine for the information about my college faculty. It works well when there are limited search results but when there are a lot of results, JS injects them fine into the DOM but it pushes the rest of the elements (like search bar and heading) off the page.

To see what I mean search for a name like "MURUGAN" and it looks fine:

view on searching for "MURUGAN"

But when you search for something more generic like "M"... it obviously shows a lot of results (there are quite a lot of people named with M), and that's okay by me. I don't want to limit the number of results. But what these humongous number of results do is they push the heading and search engine off the page:

view upon searching just for "M"

You can even test this out for now on https://vit-faculty-search-ef30b.web.app/

You can see my ui.js file is pushing these results on the page using insertAdjacentHTML. But why is it pushing my other content off the page?

Solution

  • In your class="container main-container".You have set display as flex .Set it to block.