1. 29 Jul 2008 2:02 AM #1
    salvo
    salvo is offline
    Sencha User
    Join Date
    Feb 2008
    Posts
    31
    Vote Rating
    0
    salvo is on a distinguished road
      0  

    Default Problem changing accordion tabs height w/o a doctype

    Problem changing accordion tabs height w/o a doctype


    Hi,

    I'm trying to change the height of all tabs in an accordion panel with a custom CSS to mimic Outlook menu:
    Code:
    .accordion-menu .x-accordion-hd {
	color:#15428B;
	font-weight:bold;
	height: 23px;
	padding: 8px 0px 0px 10px;
}
    ExtJS code:
    Code:
    var menuPanel = {
	xtype		: 'panel',
	id		: 'menu',
	layout		: 'accordion',
	defaults	: {xtype: 'panel', cls:'accordion-menu'},
	items		: [{
				title	: 'News',
				cls:'accordion-menu'
			},{
				title	: 'Innovations'
			},{
				...
			}]
};
    This works with all browsers including IE6 but only if you set a Doctype! which is not a good practice in ExtJS application development because of IE6 rendering bugs (lot of threads on it).


    The issues I have found not using a doctype:
    • "height: 28px;" renders a standard accordion tab height in IE6 of about 16px, 28px in FF.
    • "height: 28pt;" changes the height to 28px in IE6 but Firefox generates huge ugly tabs


    My question: is there a cross-browser way to set the accordion tabs (headers) height not using a doctype ? Has someone found a workaround?

    Thanks a lot!
    Reply With Quote Reply With Quote
  2. 29 Jul 2008 2:04 AM #2
    Animal
    Animal is offline
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,458
    Vote Rating
    20
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough
      0  

    Default


    Use classes based on the browser? Ext adds browser-specific class names to the <body> tag.
    Search the forum: http://www.google.com/coop/cse?cx=01...%3Az7of1ufqccu
    Read the docs too: http://extjs.com/deploy/dev/docs/
    Scope: http://extjs.com/forum/showthread.ph...642#post257642
    Reply With Quote Reply With Quote
  3. 29 Jul 2008 2:27 AM #3
    salvo
    salvo is offline
    Sencha User
    Join Date
    Feb 2008
    Posts
    31
    Vote Rating
    0
    salvo is on a distinguished road
      0  

    Thumbs up


    Hi Animal,
    Quote Originally Posted by Animal View Post
    Ext adds browser-specific class names to the <body> tag.
    Wow I wasn't aware of this. Here is my workaround accordingly:
    Code:
    .ext-ie6 .accordion-menu .x-accordion-hd {
	height: 23pt;
}

.accordion-menu .x-accordion-hd {
	color:#15428B;
	font-weight:bold;
	height: 23px;
	padding: 8px 0px 0px 10px;
}
    Still don't know why 'px' height is not handle by IE6 w/o a doctype though.

    Thank you for pointing me in that direction I learn from you every day!
    Reply With Quote Reply With Quote