Extjs 4, Extjs 5 - Wrong panel rendring in Internet Explorer
Hello there,
While working on Extjs 5, we came across this bug using IE11. The rendering of a panel is not proper in the second row while using a table layout. I was able to reproduce this using Extjs 4 as well.
The problem is when you have a table with divs with column layout as 1-2-1 or 1-2 columns (1, 2 represent number of columns in each row), the left column panel pushes towards right and the rendering is not proper. This does not happen when you use Chrome or Mozilla.
Below are the fiddles. You need to use IE(11) to open this to see the distorted column. while in Chrome, it works well.
https://fiddle.sencha.com/#fiddle/mnm (1-2-1 column layout)
https://fiddle.sencha.com/#fiddle/mno (1-2 column layout).
EDIT: I noticed that as soon as I remove the panel rendering on the first row from code, the 2nd row renders properly. Which is something we have been observing in our production environment too.
Can someone help me on fixing this with a workaround or some way?
Code below:
Code:<html> <head> </head> <body> <h1> Testing Extjs Panel Rendering in 1-2-1 Layout </h1> <h5> This fiddle tests the Extjs panel rendering in a table with first row has one column(span2), the second row has two columns (width 50% each) and the third row again single column(colspan 2). This breaks the second row when tested in IE11 but works fine in Chrome/Firefox. This is persistant in Extjs 4.x as well as 5.x </h5> <table border='1' width="800"> <tbody> <tr> <td colspan="2"> <div id="parent_div1"> <div id="information1"></div> </div> </td> </tr> <tr> <td width="50%"> <div id="parent_div2"> <div id="information2"></div> </div> </td> <td width="50%"> <div id="parent_div3"> <div id="information3"></div> </div> </td> </tr> <tr> <td colspan="2"> <div id="parent_div4"> <div id="information4"></div> </div> </td> </tr> </tbody> </table> <script> /*global Ext:false */ Ext.onReady(function() { var resultsPanel1 = Ext.create('Ext.panel.Panel', { title: 'Results1', height: 200, renderTo: "information1", resizable: true, border: true, layout: { type: 'vbox', // Arrange child items vertically align: 'stretch', // Each takes up full width padding: 5 }, items: [] }); var resultsPanel2 = Ext.create('Ext.panel.Panel', { title: 'Results2', height: 200, renderTo: "information2", resizable: true, border: true, layout: { type: 'vbox', // Arrange child items vertically align: 'stretch', // Each takes up full width// padding: 5 }, items: [] }); var resultsPanel3 = Ext.create('Ext.panel.Panel', { title: 'Results3', height: 200, renderTo: "information3", resizable: true, border: true, layout: { type: 'vbox', // Arrange child items vertically align: 'stretch', // Each takes up full width padding: 5 }, items: [] }); var resultsPanel4 = Ext.create('Ext.panel.Panel', { title: 'Results4', height: 200, renderTo: "information4", resizable: true, border: true, layout: { type: 'vbox', // Arrange child items vertically align: 'stretch', // Each takes up full width padding: 5 }, items: [] }); }); </script> </body> </html>
