3. "ons-bottom-toolbar" doesn't work

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.

"ons-bottom-toolbar" doesn't work

  • P

    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>
    0 1 Reply
  • 侍

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

    0
  • P

    Thanks a lot!
    The workaround works, thanks!

    0
  • 侍

    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.

    0