PDA

View Full Version : Overlapping UI Components in Chrome



pisaacs
29 May 2019, 7:55 AM
I'm working with Ext.JS 4.2.x in a legacy application and recently Chrome is having a weird rendering issue where (randomly) UI components that are supposed to be stacked on top of each other over overlap. The strangest part is that the UI sometimes renders correct (at first) but then with render incorrectly on refresh.

It most cases it appears to be the bottom part not having the CSS correctly calculated for the top part of the component.

57989

I've tried setting heights and widths on all the UI components and it still continues happens.
Here is an example of on of the components on the page displayed in the screen shot. This is typical of all the UI components on the page.



var selectionPanel =
{
layout:
{
type:'hbox',
align:'stretch'
},

items:[
{
title:'Select Option 1',
flex:1,
margin: outerMargin,
height:100,
style:{
border: borderStyle
},
items:[{
xtype:'combo',
width:200,
margin: innerMargin,
triggerAction:'all',
store:[<%= myNames.toString()%>],
listeners:{
select:State_Select
}
}]
},
{
title:'Select An Second Option',
flex:1,
margin:'0 4 8 4',
height:100,
style:{
border: borderStyle
},
items:[{
id:'bulkTypeSelect',
xtype:'combo',
width:200,
margin: innerMargin,
triggerAction:'all',
store:[<%= globalTypesNames.toString()%>],
listeners:{
select:State_Select_ET
}
}]
}]
};