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

    Have 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!

Log in to reply