Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Jun 2010
    Posts
    10
    Vote Rating
    0
    rhinst is on a distinguished road

      0  

    Question Short text not displaying in tabs

    Short text not displaying in tabs


    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.

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.

    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


Thread Participants: 1

Tags for this Thread