ons-tabbar bottom how to properly set height

Flosef

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:

Any idea how I can fix it?
Thank you

Leonardo Augusto

@Flosef said:

.tab-bar__button

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

0_1476976442608_Sem título.png

Fran Diox

@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>

Flosef

@Leonardo-Augusto @Fran-Diox

Perfect. Thanks for your time!

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons-tabbar bottom how to properly set height