RadComboBox is not rendering correctly in IE 8 Standards mode, though it looks fine in IE 7 Standards Mode and in IE 9.
When rendered, the combo box is followed by a second, visible "rcbFakeInput" input also created by Telerik that causes the combo box container height to stretch, allowing more of the combo box background image sprite to be visible than should be. The result is a combo box with an undesirable, extra row of strange graphics beneath it (see attached screenshot).
<telerik:RadComboBox ID="rcbExistingRoles" runat="server"> produces the HTML/CSS below. Note the second <input> tag with class="rcbFakeInput".
Using the IE developer tools, the problem goes away if I specify a class that sets the display of the "rcbFakeInput" to none. However, I'm not sure of the purpose of this fake input and would have to hide it in numerous places in the app we are developing.
When rendered, the combo box is followed by a second, visible "rcbFakeInput" input also created by Telerik that causes the combo box container height to stretch, allowing more of the combo box background image sprite to be visible than should be. The result is a combo box with an undesirable, extra row of strange graphics beneath it (see attached screenshot).
<telerik:RadComboBox ID="rcbExistingRoles" runat="server"> produces the HTML/CSS below. Note the second <input> tag with class="rcbFakeInput".
Using the IE developer tools, the problem goes away if I specify a class that sets the display of the "rcbFakeInput" to none. However, I'm not sure of the purpose of this fake input and would have to hide it in numerous places in the app we are developing.
<
div
class
=
"RadComboBox RadComboBox_Vista"
id
=
"rcbExistingRoles"
style
=
"width: 160px; position: relative;"
_events
=
"[object Object]"
control
=
"[object Object]"
value
=
""
>
<
table
class
=
"rcbDisabled"
style
=
"width: 100%; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-collapse: collapse; table-layout: fixed;"
summary
=
"combobox"
>
<
tbody
>
<
tr
class
=
"rcbReadOnly"
>
<
td
class
=
"rcbInputCell rcbInputCellLeft"
style
=
"width: 100%; margin-top: -1px; margin-bottom: -1px;"
>
<
input
name
=
"rcbExistingRoles"
disabled
=
""
class
=
"rcbInput radPreventDecorate"
id
=
"rcbExistingRoles_Input"
style
=
"display: block;"
type
=
"text"
readOnly
=
""
_events
=
"[object Object]"
autocomplete
=
"off"
jQuery17206440974672821855
=
"2"
/>
<
input
tabIndex
=
"-1"
class
=
"rcbFakeInput"
style
=
"left: 5px; top: 2px; width: 133px; height: 18px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; position: absolute; z-index: 1; background-color: transparent;"
/>