A combobox with autocompletion does not display correctly in IE 6. Works fine in FF 2.
IE does not allow enough vertical height for the combobox so that the combobox items are only partially viewable.
Problem seems more severe when there are fewer combobox items so for example if there are two matches only half of the first selectable item is visible in IE.
Is it bad code in my app? Or a known dojo 0.4 issue?
Below is I hope the relevant code. I haven't used dojo before so please bear with me!
This is the code from the JSP page that displays the drop down:
<code>
<ww:component theme="theme1" template="tickerAutoComplete.ftl"
templateDir="template" labelposition="top"
label="Tickers"
onchange="formChange(this)"
>
<ww:param name="value" value="tickers"/>
<ww:param name="name" value="'tickers'"/>
<ww:param name="headerValue" value="'-- Select --'"/>
<ww:param name="headerKey" value="''"/>
<ww:param name="listKey" value="'id'"/>
<ww:param name="listValue" value="'name'"/>
</ww:component>
</code>
This is a code snippet from tickerAutoComplete.ftl:
<code>
<input dojoType="TickerSugget" id="tickerWgt"
value="${parameters.get('value')?default("")}"
name="${parameters.get('name')}"
mode="remote"
onValueChanged="${parameters.get('onchange')?default("")}"
templatePath="/template/ComboBoxDojoTemplate.html"
dataUrl="tickerSuggest.action?search=%{searchString}"
autoComplete="false"
searchDelay="200"
maxListLength=10
>
</code>
and this is the ComboBoxDojoTemplate.html
<code>
<span _="whitespace and CR's between tags adds in FF"
class="dojoComboBoxOuter"
><input style="display:none" tabindex="-1" name="" value=""
dojoAttachPoint="comboBoxValue"
><input style="display:none" tabindex="-1" name="" value=""
dojoAttachPoint="comboBoxSelectionValue"
><input type="text" autocomplete="off" class="dojoComboBox"
dojoAttachEvent="key:_handleKeyEvents; keyUp: onKeyUp; compositionEnd; onResize;"
dojoAttachPoint="textInputNode"
><img hspace="0"
vspace="0"
class="dojoComboBox"
dojoAttachPoint="downArrowNode"
dojoAttachEvent="onMouseUp: handleArrowClick; onResize;"
src="${this.buttonSrc}"
></span>
</code>
Thanks!