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


  • 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



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


Log in to reply