PDA

View Full Version : IE rendering issue ST2.2



jfordyce@m2mdatacorp.com
17 Sep 2013, 6:51 AM
I have been trying to tackle a display issue under only IE10.
Tab from a tab panel using the OptimizedTab plugin

{
id: 'locator-tab-findtech',
layout: 'fit',
iconCls: 'user',
scrollable: false,
title: 'Find Tech',
items: [
{
xtype: 'toolbar',
docked: 'bottom',
style: 'background:transparent;',
layout: {
type: 'hbox',
pack: 'center'
},
items: [
{
id: 'locatorFindTech-search',
xtype: 'button',
iconCls: 'search',
iconMask: true,
text: 'Search',
align: 'left'
},
{
xtype: 'label',
html: 'within',
style: 'padding-left:10px;color:#000000;'
},
{
id: 'locatorFindTech-distance',
xtype: 'selectfield',
width: 200,
value: '50',
align: 'right',
options: [
{ text: '20 miles', value: '20' },
{ text: '50 miles', value: '50' },
{ text: '100 miles', value: '100' },
{ text: '500 miles', value: '500' },
{ text: '1000 miles', value: '1000' }
]
}
]
},
{
xtype: 'mapSearchTech',
flex: 1
}
]
}

xtype: mapSearchTech from above

Ext.define( 'R3.view.locator.MapSearchTech', {
extend: 'Ext.Container',
xtype: 'mapSearchTech',
requires: [
],
config: {
itemid: 'locatorFindTech',
layout: 'hbox',
padding: '0 15 15 15',
items: [
{
id: 'locatorFindTech-skillsets',
padding: '15 15 15 15',
html: '',
flex: 1
},
{
id: 'locatorFindTech-results',
scrollable: true,
padding: '15 15 15 15',
html: '<br><br>No Search Made Yet.',
flex: 1
}
]
}
} );


This then gets dynamic form panel with inner fieldsets added to it, but only results in the screenshot attached in IE. In Chrome, it is fine. In the IE inspector if i set the height to 100% for the very first x-translatable-hboxfix it renders at 100% height and scrolls fine in IE. I cannot figure out the CSS to only do this to the very first div with the class x-translatable-hboxfix. If i globally set it, it does render at 100% but the scrolling snaps because all of the nested div of that class seems to mess with it still

Any help would be appreciated!

sherb
21 Nov 2013, 1:37 PM
Similar circumstances: Sencha Touch 2.3.0, IE10. Works fine on Chrome, Safari, Firefox, iOS, Android. Like the OP, I also added 'height: 100%' to x-translatable-hboxfix and ran into the same scrolling issue. Normally I wouldn't care, but a customer is using IE10 for testing.

Is there any fix for this?

UPDATE: I tracked this down to setting the 'scrollable' parameter on the fieldset; using either true or false will break the layout. Here's a jsfiddle showing the problem: http://jsfiddle.net/sherburne/q5A97/

jens13583
25 Mar 2015, 6:42 AM
This problem is still present with ST 2.4.1 :-(
Here's the sencha fiddle:
https://fiddle.sencha.com/fiddle/k8k

indraneelpole
6 Jan 2016, 10:44 AM
Similar circumstances: Sencha Touch 2.3.0, IE10. Works fine on Chrome, Safari, Firefox, iOS, Android. Like the OP, I also added 'height: 100%' to x-translatable-hboxfix and ran into the same scrolling issue. Normally I wouldn't care, but a customer is using IE10 for testing.

Is there any fix for this?

UPDATE: I tracked this down to setting the 'scrollable' parameter on the fieldset; using either true or false will break the layout. Here's a jsfiddle showing the problem: http://jsfiddle.net/sherburne/q5A97/
So did you manage to find a solution for it?