Monaca Onsen UI Discord Chat Github Repo

Increase height of ons-tabbar - how?



  • How can I increase the height, text size, and image size of a ons-tabbar? The default size of these items is too small for a specific solution I’m working on. And, I can’t seem to find the CSS that should be modified to increase their sizes.

    Thank you in advance.
    PD



  • change ons-tabbar height:

    • tabbar
    • ons-tabbar__footer

    Example:

    .ons-tabbar_footer{
      height: 80px
    }
    

    change ons-tab text size, icon size and badge (if you need):

    • tabbar__icon
    • tabbar__label
    • tabbar__badge

    example:

    .tabbar__icon{
      font-size: 20px
    }