How do I overflow/breakout a side menu item label?
Hello, slowly improving my CSS knowledge but trying to work out a "classic" case of breaking out a collapsed side menu's label on hover. I'm not sure how I can achieve this with the current styling and HTML I've put in place so far.
From what I've read, I need to make a parent element
position: relative and then make the label element position: absolute to break it out? I could be totally wrong here of course 😄 .
CSS & HTML can be viewed at the link below:
https://scorado-examples-nextjs-a3t5m8myz-scorado.vercel.app/
CSS source: https://github.com/scorado-ltd/scorado-examples-nextjs-cosmos/blob/feature/framework-styling/src/feature/framework/navigation/sideMenu/index.module.scss
Any help is most appreciated!GitHub
scorado-examples-nextjs-cosmos/src/feature/framework/navigation/sid...
Contribute to scorado-ltd/scorado-examples-nextjs-cosmos development by creating an account on GitHub.
19 Replies
unfortunatly we are not authorized to see the vercel app (team only)
in this case you'll probably get away with making the
SideMenu__itemLabel positioned absolute, relative to the ideMenu__item you can position the label by setting the top/right/bottom/left (or inset) properties
so for example
can not test itAh, I can change that in Vercel!
A bit of additional info in the mean time...
I'm definitely not understanding what's going on, if I change the width of the only element that has overflow-x: hidden then I start to see the content. Even if I change just the overflow-x on that to visible, it doesn't make any difference. Only changing the width does.
ohw, you have overflow hidden on it... that's makes it difficult.
That Vercel link should be visible now
Even if I change that
overflow-x to visible, it doesn't seem to make a differenceyou cant have any overflow hidden on it, even the y axis has to be gone for that
Oooh, I see
it is creating a container it can not escape
That is indeed a problem then <:mace_laughing:1176448783480012840>
there is a future feature in the making to have a clip-margin for overflow. but don't know the status of that
Any suggestion on an alternative route for this?
yea, removing the scroll
and let js control the scrolling if nessessary (with margin-top/bottom) but I don't have an out of the box solution for that
How would I hide the menu items that overflow when the browser height is reduced though?
Essentially this behaviour
unfortunately i don't have much time now to dive into it too much. I can look at it tommorrow. Or maybe someone else can jump in
(for me it's past midnight now)
NP, it's almost midnight here as well 🙂
I hear bed calling also!
Appreciate enlightening me with the fact
overflow-y was causing the issue.The quick and dirty answer to this is to just wrap the menu items inside a div that sits inside the menu div.
the menu items div has the overflow rather than the parent that currently has it
this allows you to have the menu items still appear as needed
I'm not sure that would work for me because there will likely be other kinds of menu items that all need to be within the same scrollable area.
I'll have a play around though <a:kylo_approvesThumbsUp:1176520048538570804>.
I've ended up going down the JavaScript root
Have a separate element outside of the overflow hidden element and then position it next to the menu items using the mouse events.