3. Using React Tabbar disables page clicks

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.

Using React Tabbar disables page clicks

  • R

    I’m ussing the <Ons.Tabbar /> in my app and whenever I add it I can no longer get any onClick events to fire nor can I scroll if the content exceeds the page height. I noticed that the Tabbar component consumes the whole page height and with a higher z-index. Here is how I’ve got it implemented for the layout:

    return (
  <div>
    <Ons.Tabbar position="bottom" renderTabs={this.renderTabs} />
    <Ons.Page>
     <!-- the onClick does not get fired or I can not scroll when the tabbar is in the component -->
    <div onClick={this.handleClick}>Click me Seymour, click me...</div>
    </Ons.Page>
  </div>
)

    Is this a bug or do I have it setup incorrectly?
    Thanks

    0 1 Reply
  • Onsen UI

    @Rob-Rothe That’s not correct, the Tabbar should be inside the Page. You can see an example here: http://tutorial.onsen.io/?framework=react&category=reference&module=tabbar

    0