Search code examples
ruby-on-railssearchscrollevent-bubbling

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

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 class="footer> ....</div>
</body>

Every key stroke on the search causes the content in <main> to scroll up a bit, as if an arrow-up key is pressed.

Any clues to how to prevent "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?

Solution

  • 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.