Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    20
    makana has a spectacular aura about makana has a spectacular aura about

      0  

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

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


    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;
    }
    Attached Images
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  2. #2
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    mono blaine will become famous soon enough

      0  

    Default


    With the images added, the css should be something like

    Quote Originally Posted by makana View Post

    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);
    }

  3. #3
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    20
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default


    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...
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  4. #4
    Sencha User mono blaine's Avatar
    Join Date
    Jul 2008
    Location
    Turkey
    Posts
    123
    Vote Rating
    8
    mono blaine will become famous soon enough

      0  

    Default


    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.

  5. #5
    Sencha User jayrobinson's Avatar
    Join Date
    Jan 2010
    Location
    Palo Alto, California
    Posts
    194
    Vote Rating
    0
    jayrobinson has a spectacular aura about jayrobinson has a spectacular aura about

      0  

    Default


    Fixed in SVN #5907. This will be released with Ext JS 3.1.1.

    Thanks!

Thread Participants: 2