View Full Version : Transparent tab bar, overlay content

25 Nov 2010, 3:35 AM

I would like to use a transparent bottom tab bar, but due to the layouts involved for my content, everythnig going under my tab bar disapears.

I have just the following configuration:
=>TabPanel (with docked tab bar at the bottom)
=> first card has a card layout

I would like my tab bar to overlay all content. Has anyone an example ?

Thanks in advance.

7 Dec 2010, 5:21 AM
I'm struggling with the same problem.

I assumed "floating: true" would have solved this but my toolbar just dissappears when I apply it.



I misunderstood the float and found the right solution (overlay) here:


9 Mar 2011, 6:38 AM
Ok i have the same problem here that i want have a transparent docked bar... however the trick with the opacity works fine, but i just need a transparent background.
So if i use opacity at the toolbar i also have transparent items inside it.

What i exactly need is a Toolbar with a (Back) Button and a transparent background (cause there is a fullsize image all the time under the tbar.

So does anyone have an idea how i could make this?

I tried to set it at the SASS var's but i did not found a way for this.


28 Jun 2011, 2:21 PM

Have you figured out how to do this? I have exactly the same question.

27 Aug 2011, 9:35 PM
Any solution to this guys?

28 Aug 2011, 1:06 PM
my tabbar has this options

tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
style: "background: url('images/home-bottom-menu-bg.png') no-repeat; height: 49px"
defaults: {
html: 'test',
styleHtmlContent: true

the home-bottom-menu-bg.png is transparent

I also have a image background for the whole viewport. and i can confirm that i can see through the tabbar

As I am a newbie, please let me know if it is the correct way to do it (well, although it works)