[OPEN-301] Extra style height:0px added to element

[gcallaghan]

Sencha Touch version tested:

• 0.9 rev _5___

• only default ext-all.css
• custom css (include details)

Platform tested against:

• Google Chrome Browser on XP

Description:

• In 9.5 there seems to be an extra inline style added to the first item in the top docked panel of the given test case. This is not present in .93.

Test Case:

   /**
 * @author gcallaghan
 */
var MEDIA_URL = '/media/';
var HeaderBar = Ext.extend( Ext.Panel, {
	constructor: function(config) {
		var options = {
			leftButton:new Ext.Button({
				 text:"Back",
				 //hidden:true,
				 ui:"back",
				 handler:function(){
					alert('Back');
			  	}
			}),
			rightButton:new Ext.Button({
				 text:"Edit",
				 ui:"action" 
			    }),
		};
		
		
		Ext.apply(options, config);
		
		var obj = this;	
		obj.ad_bar = new Ext.Panel({
			layout: 'card',
		    activeItem:0,
		    items:[
	           {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/iFinancials_Logo_44x960_whitefill.png" width="960px" height="44px" /></div>'},
	           {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/ads_dummy/ad_appliance.png" width="320px" height="44px" /></div>'},
	           {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/ads_dummy/ad_doors.png" width="320px" height="44px" /></div>'},
	           {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/ads_dummy/ad_homedepotlogo.png" width="320px" height="44px" /></div>'},
	           {html:'<div class="ad"><img src="' + MEDIA_URL + 'img/ads_dummy/ad_refrigerators.png" width="320px" height="44px" /></div>'},
		    ],
		    minHeight:44, // FIXME this seems to be replaced with 0px when rendered
		    maxHeight:44,
		    cls:'ad-bar'
		});
		
		obj.buttons = [options.leftButton,options.rightButton];
		obj.toolbar_default_items = [
		   obj.buttons[0],
		   {xtype: 'spacer'},
		   obj.buttons[1]
		];
		obj.toolbar = new Ext.Toolbar({
			hidden:false,
			title:"iFinancials",
			items:obj.toolbar_default_items,
			maxHeight:44
		});
		obj.valid_sides=['left', 'right'];
		var options = {
				items:[obj.ad_bar,obj.toolbar],
				dock:"top"
		};
		HeaderBar.superclass.constructor.call(this, options);
		this.rotateAds();
	},
	rotateAds:function(){
		var obj = this;
		var delay = 2000;
		var duration = 1250;
		var next = function(){
			var l = obj.ad_bar.getLayout();
            l.next({type:'flip', duration:duration}, true);
			setTimeout(timed_next,delay);
		}
		var timed_next = function(){setTimeout(next,delay);}
		timed_next();
	},
	setTitle:function(title){
		this.toolbar.setTitle(title);
	},
	//toggleToolbar:function(){
	//	if (this.toolbar.isVisible()){
	//		this.toolbar.hide();
	//	}
	//	else {this.toolbar.show();}
	//	this.toolbar.doComponentLayout();
	//	this.doComponentLayout();
	//},
	setDefaultToolbarHandler:function(func){
		this.toolbar.items.get(0).setHandler(func);
	},
	replaceButton:function(side, new_button){
		
		if (this.valid_sides.indexOf(side) >=0){
			var old;
			if(side == this.valid_sides[0]){
				old = this.toolbar.items.get(0);
				this.toolbar.remove(old, false);
				this.toolbar.insert(0,new_button);
			}
			else {
				old = this.toolbar.items.get(2);
				
				this.toolbar.remove(old, false);
				this.toolbar.insert(2,new_button);
			}
			old.hide();
			new_button.show();
			this.toolbar.doComponentLayout();
			this.doComponentLayout();
		}
		
		//this.toolbar.doComponentLayout();
	},
	hideButton:function (side){
		if (this.valid_sides.indexOf(side) >=0){
			if(side == this.valid_sides[0]){
				this.toolbar.items.get(0).hide();
			} else {
				this.toolbar.items.get(2).hide();
			}
		}
	},
	resetToolBar:function(){
		for(var i = 0; i < this.valid_sides.length;i++){
			this.resetButton(this.valid_sides[i]);
		}
		this.toolbar.doComponentLayout();
		
	},
	resetButton:function(side){
		var button;
		if (this.valid_sides.indexOf(side) >=0){
			if(side == this.valid_sides[0]){button = this.buttons[0];}
			else {button = this.buttons[1];}
		}
		this.replaceButton(side,button);
		//this.toolbar.doComponentLayout();
	}
});

var onready = function(){
	var map = new Ext.Map({title:'Map'});
	var h_bar = new HeaderBar();
	var panel = new Ext.Panel({title:'Page'});
	var tabpanel = new Ext.TabPanel({
		title:'Main Container',
		items:[map,panel],
		fullscreen:true,
		tabBar: {
	        dock: 'bottom',
	        scroll: 'horizontal',
	        sortable: true,
	        layout: {
	            pack: 'left'
	        },
	        maxHeight:80
	    },
	    dockedItems:[h_bar],
	});
}


Ext.setup({
    onReady: onready
});

See this URL : http://


Steps to reproduce the problem:

• fire up the example in a chrome browser and inspect the top element. Above the visible element there is a component with class ad-bar. This component has the extra inline style.

The result that was expected:

• There should be a section above the toolbar item with rotating ads. This should have a height of 44px

The result that occurs instead:

• only the tool bar item is visible. The ad-bar has a height of 0px.

Screenshot or Video:

• attached

Debugging already done:

• none

Possible fix:

• not provided

[aconran]

Thanks for the bug report.

[Jacky Nguyen]

We're investigating on the min / max width / height issue. For now you can simply set the 'height' config to 44, i.e instead of:

...
minHeight:44, // FIXME this seems to be replaced with 0px when rendered
maxHeight:44,
...

just use:

height: 44