View Full Version : [FIXED-1023] Tab close icon can shift out of view

3 Jun 2010, 11:18 AM
Ext version tested:

Ext 3.2.0

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

FF3.6 (firebug 1.5.4 installed)

Operating System:



If I have scrollable tabs with the close menu on the tabs, and the
width of the tabpanel is wide enough such that the tabscroll arrows
do not appear, then the close [X] icon can shift out of view for the
last tab if the name of the tab is very long and that tab becomes active.

Test Case:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Tab-Shift Problem Example</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="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';


//your onReady code here
new Ext.Window({
id : 'myWindow',
height : 200,
width : 550,
layout : 'fit',
title : 'Test Tab-Shift Problem',
items : {
xtype : 'tabpanel',
activeTab : 0,
id : 'myTPanel',
enableTabScroll : true,
resizeTabs : false,
minTabWidth : 75,
border : false,
items : [
title : 'our first tab has a long name'

// Add a bunch of tabs dynamically
var tabLimit = 3;
(function (num) {
for (var i = 1; i <= tabLimit; i++) {
var title = 'Tab # ' + i;
title : title,
html : 'Hi, i am tab ' + i,
tabTip : title,
closable : true
title : 'Very Long Tab Name To Show Problem',
html : 'Hi, i am long tab name ',
tabTip : title,
closable : true

}); //end onReady

function setWindowWidth() {

function setTab() {

An example to show the Tab-Shift problem where the Close [x] icon shifts out of view.
To see the problem, follow these steps:
<li>First, set the proper window size by clicking <a href='javascript: setWindowWidth()'>here</a>.</li>
<li>Next, set the proper active tab by clicking <a href='javascript: setTab()'>here</a>.</li>

See this URL : http://

Steps to reproduce the problem:

Run the above code. Click the 'here' links in the first and second steps.

The result that was expected:

Tab scroll arrows would appear and the last tab shifted left to show the whole tab. Note: this does happen in the example window, if you resize it by even 1 pixel in any direction.

The result that occurs instead:

Tab title and close icon shift out of view.

Screenshot or Video:


Debugging already done:


Possible fix:

not provided

3 Jun 2010, 3:34 PM
Please follow the guidelines listed here: http://www.extjs.com/forum/showthread.php?71015-Posting-to-the-Bug-Forum


8 Jun 2010, 12:29 AM
This has been resolved in SVN, thanks for the report.