ons-tabbar bottom how to properly set height



  • Hi,

    I want to set a different height for the ons-tabbar bottom. When I try it with:

    .tab-bar__button{
      height: 60px;
    }
    

    The height is ok, but the content height of the inner page seems not to be calculated correctly.
    So the tabbar at the bottom lies over the content of the page:

    0_1476949644943_heightbar.jpg

    Any idea how I can fix it?
    Thank you



  • @Flosef said:

    .tab-bar__button

    Reducing the padding! looking for my app, i have a similar situation.

    0_1476976442608_Sem título.png


  • Onsen UI

    @Flosef For the next time, just open the developer console and check which properties apply to your elements. In this case, there is a bottom CSS property set to the page content. Change it according to your bottom toolbar:

    .page-with-bottom-toolbar > .page__content {
        bottom: 60px;
    }
    

    Otherwise, you can directly set the content div like this:

    <ons-page>
      <ons-toolbar></ons-toolbar>
    
      <div class="content" style="bottom: 60px">
         ....
      </div
    
      <ons-bottom-toolbar style="height: 60px"></ons-bottom-toolbar>
    </ons-page>
    
    


  • @Leonardo-Augusto @Fran-Diox

    Perfect. Thanks for your time!


Log in to reply