PDA

View Full Version : [FIXED-430][3.??] Ext.TabPanel active bottom tab css failure



makana
17 Dec 2009, 2:31 PM
Ext version tested:

Ext 3.1


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE8
FF3.5.5 (firebug 1.4.5 installed)
Adobe Air 2.0beta


Operating System:

Win7 Pro


Description:

Seems that the active bottom tab in an Ext.TabPanel has a css failure in Ext3.1. Background-positions were "swapped" and a margin-right of 3px is missed.


Test Case:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script language="JavaScript" type="text/javascript" src="../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
</head>
<body>
<script language="JavaScript" type="text/javascript">
Ext.onReady(function() {
var tp = new Ext.TabPanel({
width: 500,
height: 200,
title: 'TabPanel',
items: [{
title: 'Test1',
html: 'test1'
},{
title: 'Test2',
html: 'test2'
}],
activeItem: 0,
tabPosition: 'bottom'
});
tp.render('tabPanel');
});
</script>
<div id="tabPanel" style="position:absolute;left:50px;top:50px"></div>
</body>
</html>


Steps to reproduce the problem:

Copy this code in a html file and save it to the examples folder. Run it in your browser.


The result that was expected:

http://www.extjs.com/forum/attachment.php?attachmentid=17857&stc=1&d=1261088950


The result that occurs instead:

http://www.extjs.com/forum/attachment.php?attachmentid=17856&stc=1&d=1261088950


Screenshot or Video:

attached


Possible fix:



.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
background: no-repeat bottom right;
}
.x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
background: no-repeat bottom left;
margin-right: 3px;
}

mono blaine
25 Dec 2009, 2:02 AM
With the images added, the css should be something like




Possible fix:



.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
background: no-repeat bottom right;
background-image:url(../images/default/tabs/tab-btm-right-bg.gif);
}
.x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
background: no-repeat bottom left;
margin-right: 3px;
background-image:url(../images/default/tabs/tab-btm-left-bg.gif);
}

makana
25 Dec 2009, 2:57 AM
The images are right and don't have to be changed. As I understand it, ext-all.css is generated from separate css files from "resources/css/structure" and "resources/css/visual". The structure stuff is wrong here...

mono blaine
25 Dec 2009, 3:21 AM
Oh, you might have a point; my solution is just a quick fix to include right after the ext-all.css of the current release.

jayrobinson
18 Jan 2010, 11:21 AM
Fixed in SVN #5907. This will be released with Ext JS 3.1.1.

Thanks!