[2.??][DUP][FIXED] IE bug? ComboBox moves

[metalsiren]

I've been updating some old code, adding bits of awesome here and there. One of the improvements was to convert a standard search box to an auto-completing comboBox. Ext made it really easy, but then I looked at it in IE, and the search box renders at the top of the page. I can get it to move back to its normal spot by removing the 'applyTo:' in the comboBox config, so I'm fairly certain that's the root of the issue.

Any ideas?

Relevant code:


dwcpSearch.search = new Ext.form.ComboBox({
store: dwcpSearch.ds,
mode: 'remote',
minChars: 4,
queryDelay: 250,
queryParam: 'query',
displayField:'Name',
typeAhead: false,
loadingText: 'Searching...',
width: 200,
hideTrigger:true
,applyTo: 'Search_Text' //Name of the text box to use
});The search box html element is a pretty standard form dude:


<input type="text" id="Search_Text" name="Search_Text" size="27"><br>

[deanoj]

Can it be fixed with CSS?

If so maybe the Ext.isIE property might come in handy...

Dean

[metalsiren]

I can give it a shot. I'm still a newbie at most of this, so any more pointers would be appreciated.

Thanks!

[jsakalos]

Cannot you let Ext define markup? applyTo has very limited use and it requires a structural markup to be useful.

[metalsiren]

Cannot you let Ext define markup? applyTo has very limited use and it requires a structural markup to be useful.

How should I go about that? I'm used to using 'renderTo' to place gridPanels in divs and such, but how can I do that and still retain the search box's HTML form functionality?

[jsakalos]

You can use renderTo also for combo if it is necessary, for example if there is no form and combo is standalone. If you have form you just add combo to form's items and form layout does the rest.

[metalsiren]

I'm all for using a form panel, and that will eventually happen; however, right now my customer wants the auto-complete on the live site ASAP. That's why I was trying to just get this bit working within the html form, and come back and rework it into a Ext formPanel later.

I'm in the process of taking this old site and updating it, that's why the mix of old and new.

[jsakalos]

I see, so renderTo could work for you.

[metalsiren]

Thanks for the suggestions, Saki. I've switched over to using renderTo, but it still appears at the top of the page in IE.

Maybe it would help if I described the context. This comboBox is in an html table that lays out the form (old school, I know). All the other elements in the table are rendering fine. Its only this lone ext item that is bucking the trend.


<form name="Form" action="/_app/search.plx" method="POST">
<table border="0" cellspacing="0" cellpadding="3" width="95%">
<tr>
<td colspan="3">Type in a keyword(s) related to your search, select your
search category, then click &quot;Start Search&quot; to continue.</td>
</tr>
<tr>
<td nowrap valign="top"><strong>Search Category</strong><br>
<input type="radio" value="Product" checked name="Search_Option">Product Name<br>
<input type="radio" name="Search_Option" value="Num">Product Number<br></td>
<td valign="top"><strong>Keywords or #:</strong><br>

<div id='searchBox'></div><br>

<select size="1" name="Search_Type">
<option selected value="All">Match All Words</option>
<option value="Starts">Starts With</option>
<option value="Exact">Exact Match</option>
</select></td>

</table></form>And I've now updated my js to be:


hideTrigger:true
,name: 'Search_Text'
,renderTo: 'searchBox'

Thanks for being patient with me.

[jsakalos]

What about setting position:relative on searchBox? Just a tip...

[metalsiren]

Tried it... no luck. I'm working on getting an example to post so you can see what I'm talking about.

[metalsiren]

Alright. Here is an example you can look at. I know the html is kinda scary, it's about 10 years old. But look at it in IE and FF and notice the search box. Browser discrepancies drive me crazy.

[metalsiren]

Hmm, this is weird. I used firebug-lite to inspect the dom in IE, and this is what i found inside my searchBox div:


<div id="searchBox" contentEditable="inherit">
<div class="x-form-field-wrap " id="ext-gen6" contentEditable="inherit">
<input class=" x-form-text x-form-field " id="ext-comp-1001" contentEditable="inherit" start="fileopen"
type="text" height="41850768" maxLength="2147483647" loop="1" size="24" name="Search_Text" autocomplete="off"
jQuery1219348975669="4">
height="41850768"? That could be causing problems... but where is it coming from?

[jsakalos]

Is this what I should get? I do not see any combo... :(

[metalsiren]

??? Let's see. What version of FF are you running? I'm on FF2.0.0.16 and IE 6.0.29 and this is what I see (ff and ie).

The combo box is supposed to show after typing in the search box - which should be in about the middle of the page.

[jsakalos]

FF3@Linux - I've restarted the browser and now I see the combo at the right place.

And yes, in IE6/7 it is at the top of the page. I don't use IE so I don't have any tools to debug but there is one link that could help you to understand what might be happening:

http://www.satzansatz.de/cssd/onhavinglayout.html

[metalsiren]

Thanks for helping, Saki, and I read (most) of that link; but honestly it's a bit beyond me. I'm still learning html/css/js so all I could really get out of that article is that IE is a strange and inscrutable beast.

What I really need is someone to explain what exactly is going on deep in the bowels of IE and why it hates some simple code. :(

[metalsiren]

Screw it, I'm just going to rewrite the form into an Ext formPanel. Should've done it earlier.

[jsakalos]

Yeah, good idea. The original idea was to play with zoom:1 css property at various levels of containers to see if you can get somewhere with that. Also position:[relative|static] can have some influence. Don't ask me where though... Somewhere on the container chain... ;)

[metalsiren]

Alright, I think I have this solved. Tell me if you think I should file a bug, Saki.

I was reworking the page into a formPanel, and the comboBox still wouldn't show in IE, so I knew there had to be some problem with it specifically. So I randomly cut out hideTrigger: true and it worked! Now I want this to be a search box, and not a comboBox, so I need to hide that trigger so I did this:


dwcpSearch.searchBox = new Ext.form.ComboBox({
store: dwcpSearch.ds,
mode: 'remote',
minChars: 4,
queryDelay: 250,
queryParam: 'query',
displayField:'Name',
typeAhead: false,
loadingText: 'Searching...',
width: 'auto',
hideTrigger: false
,triggerClass:'x-hidden'
,name: 'Search_Text'
,fieldLabel: 'Search Text'
,renderTo: 'searchBox' //Name of the text box to use
});And it works just fine, IE shows the combo but not the trigger. So does this count as a bug? I'm using Ext 2.2

Thanks again for helping me out, Saki.

[jsakalos]

I cannot say if it's a bug. I would maybe classify as "not-yet-found-workaround" of IE bug. However, bugs forum is inspected closely by the team so I'm moving this thread to bugs.

[Condor]

This is a duplicate of this post (http://extjs.com/forum/showthread.php?t=43231) (fix included).