Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User gcallaghan's Avatar
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247
    Vote Rating
    0
    gcallaghan is on a distinguished road

      0  

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

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


    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:

    Code:
       /**
     * @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
    Last edited by gcallaghan; 15 Sep 2010 at 12:14 PM. Reason: added FIXME comment on related section

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,363
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Thanks for the bug report.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User Jacky Nguyen's Avatar
    Join Date
    Jul 2009
    Location
    Palo Alto, California
    Posts
    469
    Vote Rating
    14
    Jacky Nguyen has a spectacular aura about Jacky Nguyen has a spectacular aura about

      0  

    Default


    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:

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

    Code:
    height: 44

Similar Threads

  1. Textfield height is set to 0px after collapsing the panel
    By dneuber in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 8 Jul 2010, 5:51 AM
  2. RowEditor hbox element.style height
    By jasonb885 in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 26 May 2009, 4:52 PM
  3. IE6 extra margin attributes added to <body>
    By dyerrington in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 4 Feb 2009, 12:30 PM
  4. Height: 0px on IE doesn't work
    By Null3xc3ption in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 29 Apr 2008, 12:43 PM

Thread Participants: 2