Rails: Every entry in the search moves the content in <main> to go up one click-CodePudding

The basic layout of my code looks like this:

<!doctype html>
<html lang="en">
<head>
 .....
 ..... 
</head>
<body>
 <div>
  <%= form_tag("/search",
        method: :get,
        id:  "Search") do %>
          
          <%= search_field_tag("s",
                params[:s],
                placeholder: "search here",
                ) %>
  <% end %>
 </div>
 <main>
   <%= yield %>
 </main>
 <div scrolling" the main while entering search string would be highly appreciated.
Thanks!
Tried evt.preventDefault() in the JS for search for onChange. Also tried evt.stopPropogation() in the JS for search. But both did not work. How to stop propogation up?
    
CodePudding user response：

So turned out that the css for html had scroll-padding-top
html {
 scroll-padding-top: 2rem;
}

Check for scroll-margin-top as well if you encounter such a behavior.