RadComboBox height and bg image incorrect in IE 8 Standards Mode

2 posts, 0 answers
  1. Steve
    Steve avatar
    3 posts
    Member since:
    Nov 2012

    Posted 07 Nov 2012 Link to this post

    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.

      

    <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;"/>
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 09 Nov 2012 Link to this post

    Hello, Steve.

    Could you provide more information to how this is happening e.g.:
    -- Does it always happen, say on initial page load?
    -- Does it always happen, say after postback?
    -- Are the ComboBoxes placed inside an ajax panel / window?
    -- Do you have a rad form decorator on the page?

    All that information will be valuable to resolving this case.

    I should also note that we recently had a similar case and we are working on a fix for it. I am pretty sure both cases are related if not the same.

    Greetings,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top