Monaca Onsen UI Discord Chat Github Repo

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

  • 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 -

    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.


  • 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-tabbar position="top">

    I think that fixes the problem in Firefox as well. I have updated your code to use beta.8:

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