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