Short text not displaying in tabs

**rhinst** · 11 Aug 2011 5:50 AM

I'm having some problems with tabpanel in Google Chrome. I created a tabpanel with 26 tabs, one for each letter of the alphabet. I intend to use it to allow users to browse a grid using a phonebook-style browse-by-letter feature. The tabs look ok in firefox and IE, but in Chrome, they get screwed up (see below):

In firefox, however, things are just peachy:

This seems to only happen for tabs that have three or fewer letters in the title. If I change the tab titles to consist of more letters, the text shows up just fine.

Here's a simplified code showcase that demonstrates the issue:

Code:

<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title id='title'>Title</title> 
 
        <!-- ** CSS ** --> 
        <!-- base library --> 
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
 
        <!-- overrides to base library --> 
 
 
        <!-- ** Javascript ** --> 
        <!-- base library --> 
        <script type="text/javascript" src="../../ext-all-debug.js"></script> 
 
 
        <!-- overrides to base library --> 
 
        <!-- extensions --> 
        <script type="text/javascript"> 
Ext.define('PS.view.contacts.directoryTabs', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.directoryTabs',
  items: [{
    xtype: 'tabpanel',
    activeTab: 0,
    plain: true,
    items: [{title:'Long title works fine'},{title: 'A'},{title: 'B'},{title:'C'},{title:'D'}]
  }]
});
 
    </script> 
 
        <!-- page specific --> 
 
        <script type="text/javascript"> 
        Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
 
        Ext.onReady(function(){
 
     Ext.create('Ext.container.Viewport', {
      renderTo: Ext.getBody(),
     items: [{
     xtype: 'directoryTabs',
     }]
      });
 
            //your onReady code here 
 
        }); //end onReady
        </script> 
 
    </head> 
    <body> 
    </body> 
</html>

Has anyone else experienced this, and/or can anyone tell me what I might be doing wrong? Or is this just a browser incompatibility issue with ExtJS?

Thanks in advance.

**jsakalos** · 12 Aug 2011 1:20 AM

On my Mac OS X Lion it works only in Firefox. Both Safari and Chrome (webkit?) behave strange. See the video. I think it is a bug so I'm moving this thread to Bugs.

Short text not displaying in tabs

Thread Tools

Search Thread

Display

Short text not displaying in tabs

Short text not displaying in tabs

Tags for this Thread