search

ec-europa / europa-component-library

ECL - Europa Component Library
https://ec.europa.eu/component-library
European Union Public License 1.1
128 stars 35 forks source link

fix(mega-menu): Mega menu content position fix - FRONT-4606 #3615

Closed planctus closed 1 month ago

github-actions[bot] commented 1 month ago

🚀 Deployed on https://ecl-preview-3615--europa-component-library.netlify.app

emeryro commented 1 month ago

I get the idea behind this task, but the result design is quite odd (site header has some padding while the mega menu takes 100% width) image image

Maybe we could keep the scrollbar, but just "disable" it. I found this for instance, that seems to work: 

.noscroll {
    position: fixed; 
    overflow-y: scroll;
    width: 100%;
}

https://stackoverflow.com/questions/8701754/how-to-disable-scroll-without-hiding-it

planctus commented 1 month ago

mmh..i tried with position: fixed already but i gave up for a reason: in desktop you could open the menu after having scrolled the page a bit, using position: fixed will reset that scroll and bring the page back to top: 0; I've tried to get the scroll position but maybe because we are in an iframe in our demo that returned always 0.

I haven't noticed myself the issue with the padding being set on the body and the menu still getting the full width, so i chose this solution, but comparing the two it seems a minor issue the one described before with the position fixed, so let's go with it

emeryro commented 1 month ago

The fix is fine, so to me this task can be merged already. I just have one additional suggestion: in real cases, the display is good, but on our demo the site header is still "jumping" as we don't have scrollbar here. Maybe we could update the demo to always have a scrollbar for this component