TabBar doesn't show at the bottom on a tabPanel

**fulanke** · 27 Dec 2011 5:57 AM

REQUIRED INFORMATION
Ext version tested:

Sencha Touch 2.0.0-pr3

Browser versions tested against:

Chrome 16.0.912.63
Safari 5.1
Iphone simulator 5.0

Description:

The tabBar of the tabPanel class doesn't show if docked to bottom

Code:

Ext.application({
    name: 'Sencha',


    launch: function() {
        Ext.create('Ext.tab.Panel', {
            fullscreen: true,
            tabBarPosition: 'bottom',
            ui: 'dark',
            defaults: {
                styleHtmlContent: true
            },
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Home Screen'
                },
                {
                    title: 'Contact',
                    iconCls: 'user',
                    html: 'Contact Screen'
                }
            ]
        });
    }
});

HELPFUL INFORMATION

Operating System:

Mac OS X 10.7

**mitchellsimoens** · 27 Dec 2011 6:28 AM

Using your code, I cannot reproduce this with PR3 or our latest code.

**fulanke** · 27 Dec 2011 6:44 AM

in fact, i cannot dock anything at the bottom...
even in a Ext.NavigationView
all the other sides work: top, left, right, but when i put it on the bottom nothing appear.

It's juste a simple tutorial, here is my index.html, and the index.js is in my preview post....

Code:

<html> 
<head> 
    <title>Hello World</title>
    <link rel="stylesheet" href="touch/resources/css/apple.css" type="text/css" />


    <script type="text/javascript" src="touch/sencha-touch-all.js"></script>
    <script type="text/javascript" src="index.js"></script>


    <script type="text/javascript"> 
        function appLoad(){


        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
</body> 
</html>

**raynic** · 28 Dec 2011 1:26 AM

I have the same problem. Even with RC3. I tried it with the example provided in the docu.
ray

**JeffHeard** · 28 Dec 2011 10:06 PM

I get the same problem, and I'm using the same system parameters. I downloaded PR3 today, and I have been really excited about it, but I've been stumped on this issue all evening. Everything else seems to work well for me, but I cannot get a tab bar to show up in a browser.

Even copying the code directly from your Getting Started tutorial, I get the same problem. I realize that you're running in a "live demo" mode on the tutorial, so the bug is especially confusing.

**Jamie Avins** · 3 Jan 2012 9:28 AM

We'll take a closer look at it.

**rdougan** · 9 Jan 2012 11:05 AM

Are you guys using a HTML5 DOCTYPE?

**JeffHeard** · 9 Jan 2012 11:13 AM

Yeah, for me at least it turned out to be a typo. A very insidious little typo, that for whatever reason didn't turn up any errors in my debugger

I had:

<!DOCTYPE <html>
<html>
...
</html>

Instead of

<!DOCTYPE html>
<html>
</html>

What a weird failure mode...

**rdougan** · 9 Jan 2012 11:25 AM

Yup, can be annoying.

I've added it to the documentation for the next release, so hopefully it won't trip anyone else up.

**fulanke** · 14 Jan 2012 6:39 AM

Thanks you guys, it resolves the problem!!

TabBar doesn't show at the bottom on a tabPanel

Thread Tools

Search Thread

Display

TabBar doesn't show at the bottom on a tabPanel

TabBar doesn't show at the bottom on a tabPanel

bottom dock problem....

bottom dock problem....

Tags for this Thread