Place content between <ons-toolbar> and <ons-tabbar>

[SushiMan]

Is it possible to display content between <ons-toolbar> and <ons-tabbar>?

I want to have a tabbar right below a profile-Section within the page which is about 25% of the screen.

The tabbar-page contetn should be swipeable as before.

    <template id="x.html">
        <ons-page>
            <ons-toolbar>
                <div class="center">
                    Login
                </div>
            </ons-toolbar>
            <!-- DISPLAY CONTENT HERE -->
            <ons-tabbar swipeable position="bottom">
                <ons-tab page="x_tab1.html" label="" autogrow active>
                </ons-tab>
                <ons-tab id="x_tab2" page="x_tab2.html" label="test" autogrow>
                </ons-tab>
            </ons-tabbar>
        </ons-page>
    </template>

My intention is to display something like this with swipe-possibility:

Thanks for your reply.

[emccorson]

In the image you provided, which bit do you want to be the tabbar swipeable content - the image of the field at the top or the white boxes at the bottom?

If you want the tabbar content to be the white boxes at the bottom, then it’s just a case of messing about with the CSS of tabbar to increase its height.

If you want the tabbar content to be the image of the field at the top, then what is supposed to go below the tabbar?

Either way I think this should be possible, but I’m still not sure exactly what kind of layout you want. Any more information you can provide would be helpful.

[SushiMan]

Hi,

i might specify my intentions a bit, since the screenshot is quiet confusion and not really what i want to achieve - since i am not really familar (or did not made it work) with how to style the onsen ui elements right i am not able to style neither the tabbar nor the toolbar to achieve the following:

I just want to have a normal Toolbar, after that, there should be some fixed content, which should be the same within all the following tabs (like a header of the tabbar - in here called “Material is Good”), after that should follow the normal tabbar and after that there should be the pageContent.

<Toolbar>
<fixed Content with specified height and maybe an image or some text in it or whatever>
<Tabbar>
<TabbarPages>

So what i am not able to reproduce is the fixed content, since the tabbar will always be right below the toolbar or - if i choose to place it on the bottom - on the bottom, however, this results in having the page of the tabbar start right below the toolbar.

Maybe it is possible to append some fixed header to the tabbar? Might you provide some example code?

Thanks in advance!

[emccorson]

Thanks for your reply. I think I understand now.

There are a few ways to do this but the easiest is probably to use a fixed height. The tabbar is positioned with fixed values anyway so it shouldn’t be a problem.

First put your header part between the toolbar and tabbar:

<ons-toolbar></ons-toolbar>
<div class="my-header">Material is Good</div>
<ons-tabbar position="top" class="with-header" swipeable></ons-tabbar>

I’ve given the header the class my-header and the tabbar the class with-header.

Then just put this in your CSS:

.my-header {
  height: 40px; /* or whatever height you want */
}

.with-header .tabbar {
  top: 40px; /* usually top is 0px so this is 0px + the height of the header */
}

.with-header .tabbar__content {
  top: 89px; /* usually top is 49px so this is 49px + the height of the header */
}

By the way, this assumes that you are only developing for Android. If you are developing for iOS you’ll need to do some extra checks so the custom style doesn’t get applied there (because tabbar is usually on the bottom in iOS).

[SushiMan]

Thank you so much, i will test it within the development process and will give you some feedback about the solution on ios.

THanks :)

[snow24prince]

Hi, I also wanted to do the same thing but with a list instead of a tabbar. I tried replacing .tabbar with .list in my CSS but no luck. Can you provide some example code?
Thanks in advance!

[emccorson]

@snow24prince

I’m not sure I really understand what you want. Can you show an example like the one in this thread?

A tabbar is fixed to the top or bottom of the screen which is why this needed some special CSS, but a list is not fixed anywhere so you can just position it normally probably without special CSS.

[tylerv]

This post is deleted!