[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:

Code:

<!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:

The result that occurs instead:

Screenshot or Video:

attached

Possible fix:

Code:

.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

Originally Posted by makana

Possible fix:

Code:

.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!

[FIXED-430][3.??] Ext.TabPanel active bottom tab css failure

Thread Tools

Search Thread

Display

[FIXED-430][3.??] Ext.TabPanel active bottom tab css failure

[FIXED-430][3.??] Ext.TabPanel active bottom tab css failure