PDA

View Full Version : Rendering quirks with ComboBox



quilleashm
22 Jun 2007, 6:57 AM
Hi all,

Been playing with the combobox and found some rendering quirks on the drop down box.

Here's the test code.



<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<style type="text/css">
select {
width: 150px;
}
</style>

</head>
<body>


<select id="j_id39:ctrId" name="j_id39:ctrId" size="1">
<option value="Country,5">a and b</option>
<option value="Country,1">das</option>
<option value="Country,3">ddd</option>
<option value="Country,2">gfd</option>
</select>

<script type="text/javascript">
Ext.onReady(function(){
var field = new Ext.form.ComboBox({
"emptyClass":"required-field",
"resizable":true,
"transform":"j_id39:ctrId",
"emptyText":"(Please select...)",
"forceSelection":true,
"typeAhead":true,
"triggerAction":"all",
"listWidth":"40"
});

});
</script>

</body>

</html>


On FF 2.0.04 - There is a gap between the blue frame of the selected item in the drop down box and the right hand edge of the box area.

On IE 6 - The blue frame edge is not visible with the listWidth set as above. Resizing the dropdown until the all text is visible brings the frame into view. Not sure if this or the firefox behaviour (or neither) is correct but they are different.

Also on IE6 - The bottom edge of the combox box is not visible. It appears that the combo box is shifted down one pixel as it does not line up with the trigger button.

Cheers.

Mike.

rodionos
14 Jul 2007, 4:46 PM
> The bottom edge of the combox box is not visible. It appears that the combo box is shifted down one pixel as it does not line up with the trigger button.

Same here. Ext 1.0, IE 6. All works fine in FF.

tryanDLS
14 Jul 2007, 6:06 PM
Can you test with 1.1RC1? Be sure to force a fresh of the CSS files.

rodionos
14 Jul 2007, 9:44 PM
In IE6, I had to manually add a css declaration to the body tag to remove the offset.

body {
font-family:Verdana;
}

This seems to have fixed the problem.

Sorry, I am still learning my ways around 1.0. Haven't managed to get my hands on 1.1 yet.

rodionos
14 Jul 2007, 10:06 PM
Downloaded RC1, cleared browser cache. Same offset in IE6. :-|

jack.slocum
15 Jul 2007, 3:03 AM
You are passing a string, try making it a number:

"listWidth": 40

quilleashm
16 Jul 2007, 12:03 AM
Cheers Jack, setting the listWidth properly as a number fixes the FF problem for me. The IE problem remains, tested on IE7 too.

rodionos
23 Jul 2007, 11:45 PM
Related issue in IE6 and ext1.0: vertical scrollbar disappears if the width of a combo-list item not in the visible area exceeds the width of the active area. The component works ok in FF1.5.

It's very easy to replicate this problem: open the states.js file in examples, add an option
['ZZ', 'ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ']

Any ideas how to get around this issue?

jack.slocum
24 Jul 2007, 12:36 AM
Related issue in IE6 and ext1.0: vertical scrollbar disappears if the width of a combo-list item not in the visible area exceeds the width of the active area. The component works ok in FF1.5.

It's very easy to replicate this problem: open the states.js file in examples, add an option
['ZZ', 'ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ']

Any ideas how to get around this issue?

Yes, upgrade.