PDA

View Full Version : IE7 form field display issues


chinabuffet
28 Oct 2010, 6:40 PM
I'm having 2 slight problems with a form panel in IE7.

1. The first field's top border is being clipped off somehow.

2. The date field's trigger icon is slightly out of place.

Attached is a screenshot of the comparison between IE7 and IE8. I'm using an xhtml transitional DTD. Any ideas?

Thanks!
darthwes
28 Oct 2010, 6:41 PM
Death to IE7.
chinabuffet
29 Oct 2010, 6:12 AM
if only :(
plalx
29 Oct 2010, 11:58 AM
Do you have any custom css files included as well as ext-all.css?
chinabuffet
29 Oct 2010, 2:03 PM
Nope, here's the source... probably should've included the source in the first place.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS testing...</title>
<!-- Ext includes -->
<link rel="stylesheet" type="text/css" href="/assets/frameworks/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/assets/frameworks/ext/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/assets/frameworks/ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/assets/frameworks/ext/resources/images/default/s.gif';
</script>

<script type="text/javascript" src="testing.js"></script>
</style>
</head>
<body>
</body>
</html>




Ext.onReady(function() {

new Ext.form.FormPanel({
frame: true,
title: "I Am Form",
renderTo: document.body,
width: 350,
height: 150,
defaults: {
xtype: "textfield"
},
items: [{
fieldLabel: "First Name"
}, {
fieldLabel: "Last Name"
}, {
xtype: "datefield",
fieldLabel: "Birth Day"
}, {
xtype: "button",
text: "Submit"
}]
});

});
chinabuffet
29 Oct 2010, 3:46 PM
The first field border clipping issue seems to go away when I add:



padding: 1


To the form panel's config, although that seems pretty hackish... Still not sure about the date picker icon though.