Monaca Onsen UI Discord Chat Github Repo

ons-tabbar / hide-tabs attribute



  • Hello!

    Setting the hide-tabs attribute of a ons-tabbar component properly hides the tabbar in both ios and android views, however in the android view the content is pushed down 49px because of the .tabbar–top__content CSS class having the top: set to 49px. Am I doing something wrong here or is this a bug?

                    <ons-tabbar id="appTabbar" position="auto" hide-tabs>
                        <ons-tab page="m_modules.html" active></ons-tab>
                        <ons-tab page="m_main.html"></ons-tab>
                    </ons-tabbar>
    
    .tabbar--top__content {
        top: 49px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }
    

    Thanks,
    -Chris



  • Update:

    Removing position=“auto” from the ons-tabbar component solved this issue.

                    <ons-tabbar id="appTabbar" hide-tabs>
                        <ons-tab page="m_modules.html" active></ons-tab>
                        <ons-tab page="m_main.html"></ons-tab>
                    </ons-tabbar>