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!
