I have been working on an app in ionic3. I have created a ion-footer with buttons. I need to pop out a middle button but ion-footer is hiding it like it has CSS overflow: hidden applied on it.
I am trying to achieve something similar but no luck.
Basically, want only the buttons to pop up with the actual toolbar pushed down (out of the screen).
I have an ion-footer > ion-toolbar > ion-buttons > button
My final render should have everything hidden out of the screen and only the icons should popup without the whole bar coming out when triggered (like a notification, toast)
I got the bar to hide with a translateY($height) but when I apply a translateY(-$height) on the button, the image is clipped out.
I gradually changed the translateY() value in Chrome for the button, and I can see it is getting clipped at the edge of the bar. I tried putting “overflow: visible” to all its parents but to no avail.
It would be great if you could share what it is that you did to solve your problem too for reference.
Also, I was able to get the whole bar to show instead (like an auto-hide footer) but that is blocking some of gestures on the colored background. (Just in case if you were thinking of it )
It was because of the ‘contain’ property in ‘ion-toolbar’.
Funny thing is that only Chrome supports this right now. Linter in VS Code throws an error saying its an unknown property.
I found that setting the ‘contain’ property either to contain: none or the next best from the default contain: layout style works.