Trouble with putting an ons-tabbar inside a page

[rgins16]

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=101

Have a nice day everyone :)

[munsterlander]

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

[rgins16]

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.

[munsterlander]

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

[rgins16]

@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…

[munsterlander]

@rgins16 Not a problem and glad it is working for you!

[rgins16]

This post is deleted!