3. ons-dialog having problem with top positioned ons-tabbar inside

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-dialog having problem with top positioned ons-tabbar inside

  • C

    Hi Team,

    This is about Onset 2.

    A dialog (ons-dialog) can contain a tab bar (ons-tabbar) and displays it fine if positioned at bottom. But dialog itself doesn’t appear if tab bar within is positioned at top using attribute position=“top”.

    Here is the sample - http://codepen.io/CNaik/pen/ONgpRM

    ons-tabbar position is set to top in the sample. Clicking list item should bring up the dialog but it will only appear if you remove position=top.

    Firefox developer console also shows error ( TypeError: page._getContentElement is not a function ) when list item is clicked second time.

    Kindly let me know if I am doing anything wrong OR if you know the workaround.

    Regards,
    CNaik.

    0 1 Reply
  • Onsen UI

    @CNaik Hi! Welcome to the forum :)

    Unlike in Firefox, that Pen works well in Chrome. The top tabbar is displayed without problems. But in any case, you should wrap all your pages in ons-page:

    <ons-template id="tabs.html">
  <ons-dialog var="dialog" cancelable>
    <ons-page>
      <ons-tabbar position="top">
        ...
      </ons-tabbar>
    </ons-page>
  </ons-dialog>
</ons-template>

    I think that fixes the problem in Firefox as well. I have updated your code to use beta.8: http://codepen.io/frankdiox/pen/zqzZay

    1
  • C

    Yes, that fixes the problem. Thank you Fran.

    Didn’t think and tried it earlier as I thought ons-page is like html body tag and should be the root element in each html/template.

    Regards,
    CNaik.

    0