Monaca Onsen UI Discord Chat Github Repo

Change Tabbar height conditionally in React

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

  • 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?

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