"ons-bottom-toolbar" doesn't work



  • Hi, the following “ons-bottom-toolbar” doesn’t work.
    Did I mistake the usage? Or is it an issue for “ons-bottom-toolbar” in v2?
    Thanks.

    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button>
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Buttons</div>
        <div class="right">
          <ons-toolbar-button>Button</ons-toolbar-button>
        </div>
      </ons-toolbar>
    
      <section style="padding: 8px">
        <ons-button modifier="quiet">quiet</ons-button>
        <ons-button>Default</ons-button>
        <p></p>
        <ons-button modifier="large--quiet">large--quiet / material--flat</ons-button>
        <p></p>
        <ons-button modifier="large">large</ons-button>
      </section>
    
      <ons-bottom-toolbar>
        <div class="left">
          <ons-toolbar-button>
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Buttons</div>
        <div class="right">
          <ons-toolbar-button>Button</ons-toolbar-button>
        </div>
      </ons-bottom-toolbar>
    
    </ons-page>
    


  • @paul You appear to be correct. This codepen demonstrates the problem. The classes after compilation are completely different so obviously something is going on. It appears that the left, center, and right classes have not been implemented for the bottom toolbar in v2.

    To hack your way to success, use:

    <ons-bottom-toolbar>
        <div class="left navigation-bar__left">
          <ons-toolbar-button>
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center navigation-bar__center navigation-bar__title">Buttons</div>
        <div class="right navigation-bar__right">
          <ons-toolbar-button>Button</ons-toolbar-button>
        </div>
      </ons-bottom-toolbar>
    

    EDIT: Issue 1424 has been created.



  • Thanks a lot!
    The workaround works, thanks!



  • Just wanted to give everyone an update. Per @argelius this is not a bug and an intentional implementation as documented in the Github repo link above.


Log in to reply