Disable overflow hidden on ion-footer and ion-header

[imomer]

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 want to make my ion-footer something like this:

but getting this:

Any help would be appreciated

[saip92]

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

Do you have any leads?

[imomer]

Yes actually fixed it myself.

Can you show me what design you are trying to achieve for the tabs?

May be I can help…

[saip92]

Not tabs exactly.

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 )

[saip92]

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

[imomer]

I fixed it through contain: none

[sahilmo]

hi , i am facing same issue in ionic 5 , can you please share your code

   <ion-toolbar >
      <ion-row>
      
        <ion-col class="ion-no-padding" size="2">
          <ion-button color="dark"  class="text-on-bottom">
            <ion-icon name="list"></ion-icon>
            a
          </ion-button>
        </ion-col>
    
        <ion-col class="ion-no-padding" class="ion-no-padding" size="2">
          <ion-button   color="dark"  class="text-on-bottom">
            <ion-icon name="stats-chart-outline"></ion-icon>
            b
          </ion-button>
        </ion-col>
    
        <ion-col class="ion-no-padding"  size="4"  id="home">
          <ion-button size="large"  color="light" >
            <ion-icon  name="home-outline"></ion-icon>
            c
          </ion-button>
        </ion-col>
    
        <ion-col class="ion-no-padding" size="2">
          <ion-button  color="dark"  class="text-on-bottom">
            <ion-icon name="document-outline"></ion-icon>
            d
          </ion-button>
        </ion-col>
    
        <ion-col class="ion-no-padding" size="2">
          <ion-button  color="dark" class="text-on-bottom">
            <ion-icon name="share-social-outline"></ion-icon>
            e
          </ion-button>
        </ion-col>
      </ion-row>
  </ion-toolbar>

#home {
 ion-button{
   --ion-color-primary:rgb(58, 169, 166) ;
   --border-radius: 50%;
     position: absolute;
    bottom: 0px;
    transform: translate(50%, -50%);
    z-index: 9999;
    
 }
}