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.
Trouble with putting an ons-tabbar inside a page
-
Hi everyone,
I’m using Angular 1.5.9.
I’m trying to put a tabbar inside a page. The problem I am having is trying to change the position of the tabbar. It won’t budge from the top left corner of the page. I would like to center it, and put it under a button. Has anyone successfully done this in their app? Can an Onsen dev give me some insight?
Here is a CodePen for reference:
https://codepen.io/rgins16/pen/vXpdgj?&editors=101Have a nice day everyone :)
-
@rgins16 Well, you have competing CSS going on. So what I understand, is you want a miniature tabbar in a page right? If so, can you explain why you would it this way? I just want to understand the application navigation route as there may be a better way.
-
Yes I would like the miniature tabbar on the page. I would like to put a date picker on one tab, a timepicker for start time in another tab, and a timepicker for end time in the last tab. I already have all three of these things working on the page already.
-
@rgins16 Ok, I understand now. Although, I would probably not design it this way, it may be perfect for your application. I have forked your codepen and solved your issue. You just needed a bit more CSS. For those following this and not viewing the codepen, the solution is to wrap everything in a div and change the tabbar position to relative.
-
@munsterlander That’ll do it. Thanks! CSS is the bane of my web-app-creating existence. I’m too focused on the MEAN.JS+ ONSENUI to learn CSS in depth. Something I obviously need to work on…
-
@rgins16 Not a problem and glad it is working for you!
-
This post is deleted!