PDA

View Full Version : Strange UI behavior with MS IE



Raymi
29 Dec 2010, 6:04 AM
Hi,

It is not that I am not a real fan of Microsoft Internet Explorer 8.0.7600, however I need to take it into account because of my end-users...

I am facing strange behavior UI wise for my development. I have to say that there are absolutely no problem with either Firefox or Chrome.

For instance, with GridPanels, horizaontal scrollbars are not present with MS IE but are there when needed with Firefox...

Another example, with Firefox or Chrome:
24007

With MS IE 8 (Look at field borders):
24008

I could say that for the above print screens it does not really matter, I don't want to be that pernickety B). But please have a look at those below, there it is getting critical:

With Firefox or Chrome:
24009
24012

And MS IE 8:
24011

With another screen splitted into 2 panels (hbox format), one for the graphic (Piechart) or the other one for the aggregate data - There is no graph at all with MSIE!!!! It looks like the left panel does not exist for IE...

I suppose it is me doing something wrong but I cannot figure out what.

Thanks for your help

aramaki
29 Dec 2010, 6:17 AM
first case: width in IE little bit more than in another browsers.
about second: please, share code

Raymi
29 Dec 2010, 6:27 AM
I did try changing (and increasing the width) for horizontal scrollbars but it did not solve with MS IE.

For the field that looks to be missing in the upload form here is the code:

<td align="center" height="98%">
<div id="CRMInReportsUpload"></div><br />
<div id="CRMInReportsUploadBtn"></div>
<script type="text/javascript">
<!--
fu_basic = new Ext.ux.form.FileUploadField({
renderTo: 'CRMInReportsUpload',
width: 350
});
new Ext.Button({
text: xlg_GetDialogue(81),
renderTo: 'CRMInReportsUploadBtn',
handler: function(){

if (fu_basic.getValue()) {
UploadResource(xlg_GetFileNameOnly(fu_basic.getValue()));
}
else {
fu_basic.focus();
}

}
});
-->
</script>
</td>
And for the script/css links:

<link rel="stylesheet" type="text/css" href="../ext-3.3.0/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../ext-3.3.0/ux/css/FileUploadField.css"/>
<script type="text/javascript" src="../ext-3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.3.0/ext-all-debug.js"></script>
<script type="text/javascript" src="../ext-3.3.0/ux/FileUploadField/FileUploadField.js"></script>

Raymi
29 Dec 2010, 7:45 AM
Regarding the third issue I mentioned above

splitted into 2 panels (hbox format), one for the graphic (Piechart) or the other one for the aggregate data - There is no graph at all with MSIE!!!! It looks like the left panel does not exist for IEIt looks like hbox layout with flex to 1 works odd with IE. What I noticed is that when the page was loading I could see the 2 different panels. But as soon as the graph was displayed the left panel was disappearing. So I changed to table layout specifying the width and it is working correctly now, apart from the fact that I need to specify the width according to the screen width etc...

Did somebody already face this?????? :((

aramaki
29 Dec 2010, 2:12 PM
you need to set flex parameter for both panels.also try to change layout to fit. as upload form: it`s working fine in my IE8. which mode do you use at IE?

Raymi
30 Dec 2010, 12:36 AM
Flex parameter is set on both panels. Regarding the layout, as I mentioned I changed to table layout which is the only one working. But with this layout flex parameters are not available...

Regarding the upload form, what do you mean by mode? If you mean "no-addins" or standard I have tried with both, without any success. But I made another test with http://dev.sencha.com/deploy/dev/examples/form/file-upload.html, and there I can see the field properly with IE.
Looking at the code, it is quite similar to mine so I don't know what is the difference????????????????? Is it because of CSS? But I do not set something particular for css defs.