3. Change Tabbar height conditionally in React

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.

Change Tabbar height conditionally in React

  • T

    Hi, I’m creating a bottom navigation using Tabbar in React-onsenui. How do I change the Tabbar height when running in iOS, otherwise the default height? Thank you in advance for any suggestions.

    0
  • T

    I did find out that I can modify onsen-css-components.css file for tabbar height:

    .tabbar {
    font-family: -apple-system, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, ‘Lucida Grande’, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    height: 65px;
    background-color: #212121;
    border-top: 1px solid #0d0d0d;
    width: 100%;
    }

    The bottom nav bar height will change. But I need to do this only for iOS. How to achieve this?

    0
  • E
    administrators

    One way would be to check in JavaScript whether the platform is iOS with ons.platform.isIOS and then set a CSS class that contains the height rule that way.

    There is probably a way to do it in CSS as well but I can’t think of it off the top of my head right now.

    https://onsen.io/v2/api/js/ons.platform.html#method-isIOS

    0