From 636da229ad0be866faecbfe508bf4ce333ea5801 Mon Sep 17 00:00:00 2001 From: andresgutgon Date: Sat, 19 Sep 2020 12:21:24 +0200 Subject: [PATCH] Fix sticky search bar disappearing when cart is open. So I think the issue is that all the HTML is wrapped on an `off-canvas-wrap` class that is used for doing the sidebar car open over main content. The problem is that when this car sidebar is open body of HTML overflow is changed to `overflow: hidden` and search bar use CSS `position: sticky;` which doesn't work when its parent has overflow hidden. The issue was that `off-canvas-wrap` had an `overflow: inherit` which means when body is set to overflow hidden this div inherits it and break search bar position sticky when cart sidebar is opened. The solution is to use `position: initial` which means use what a div has as default value for `overflow` which I think it's `visible`. This class is overriding the same class that comes from Foundation Framework that set this div to be `overflow: hidden`. The override was added when [we added search sticky](https://github.com/openfoodfoundation/openfoodnetwork/commit/ff69389bb0e04e46f0f72fb6d86ab50053c0f71b) More info about the problem with [position:sticky and its parent having overflow hidden](https://css-tricks.com/dealing-with-overflow-and-position-sticky/) also info about [position initial vs inherit](https://stackoverflow.com/a/29661356) --- app/assets/stylesheets/darkswarm/menu.scss | 2 +- app/views/layouts/darkswarm.html.haml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/menu.scss b/app/assets/stylesheets/darkswarm/menu.scss index 774d2bc146..bd195cbb0e 100644 --- a/app/assets/stylesheets/darkswarm/menu.scss +++ b/app/assets/stylesheets/darkswarm/menu.scss @@ -212,7 +212,7 @@ nav.top-bar { } .off-canvas-wrap { - overflow: inherit; + overflow: initial; } .off-canvas-list li.language-switcher ul li { diff --git a/app/views/layouts/darkswarm.html.haml b/app/views/layouts/darkswarm.html.haml index 9938415a4f..6f2e5b1ce9 100644 --- a/app/views/layouts/darkswarm.html.haml +++ b/app/views/layouts/darkswarm.html.haml @@ -18,14 +18,14 @@ = stylesheet_link_tag "darkswarm/all" = csrf_meta_tags - %body{class: body_classes, "body-scroll" => true , ng: {app: "Darkswarm"}} + %body{ class: body_classes, "body-scroll" => true , ng: { app: 'Darkswarm' }} / [if lte IE 8] = render partial: "shared/ie_warning" = javascript_include_tag "iehack" = render "layouts/shopfront_script" if @shopfront_layout - .off-canvas-wrap{offcanvas: true} + .off-canvas-wrap{ offcanvas: true } .fixed.off-canvas-fixed = render "shared/menu/menu" unless @hide_menu = yield :page_alert