RadCombo with ajax and IE8

[Marcin]

Hi, I'm having strange issue, which I don't know how to resolve.
I have 3 panels on my page: left, middle and right
On left there are combo with filters (rad combo ones), ajaxified with following way:

<telerik:RadAjaxManagerProxy ID="rAjaxManagerProxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="left">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="left" />
                <telerik:AjaxUpdatedControl ControlID="middle" LoadingPanelID="ralMain" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="middle">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="middle" />
                <telerik:AjaxUpdatedControl ControlID="right" LoadingPanelID="ralMain" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

Evewrything is working like a charm when I'm using firefox, chrome or IE 9. The problem starts with IE8. After search on left panel, everything is displayed but combo is loosing its items. It is not happening if I'm not using ajax. Without ajax everything is working exept it it is no ajaxified. I'm filling values from database on page_load:

protected void Page_Load(object sender, EventArgs e)

        {

            if (this.IsPostBack)

            {

                return;

            }

 

            this.rcbIndustry.DataSource = GetIndustries();

            this.rcbIndustry.DataBind();

            this.rcbIndustry.Items.Insert(0, new RadComboBoxItem());

         

            this.rcbCustomer.DataSource = GetCustomers();

            this.rcbCustomer.DataBind();

            this.rcbCustomer.Items.Insert(0, new RadComboBoxItem());

            

        }

On the beginning I thought it is related to not filling value if this is postback, but removing this check not helping. It is really strange because all comboboxes on such page are stopping working on IE.

I looked to the page code using F12 on IE 8, and it s look like whole section for drop down is such case is missing.
Do you have any advice?

I just notice that this happen on all my comboboxes with website. If there is any ajax request e.g. through the ajaxpanel, combobox dropdown disapears  in IE 8.

I'm using version: 2011.1.413.40

Update

I think I know what it is: I'm having folloing peace of code i master page in head section:

<!--[if !IE]>-->
    <link href="Non-IE_themes/Telerik_nonIE.css" rel="stylesheet" type="text/css" />
    <!--<![endif]-->
      <!--[if gte IE 9]>
    <link href="Non-IE_themes/Telerik_nonIE.css" rel="stylesheet" type="text/css" />
    <![endif]-->

which contains following css:

.RadComboBoxDropDown .rcbScroll
{
    height: 100% !important;
    max-height: 300px;
}

When this is section is added it is causing problems on IE 8. (IE 7 compatibility is working). When removed IE 8 is working... but other browsers have issue related to this css fix. :(

Update 2

Even removing this sentense from css won't help. Problem is on master page conditional statement. Only removing from master page helps.

[Dimitar Terziev]

Hi Marcin,

As you have noticed the problem is related to the styles you are setting and especially this one:

height: 100% !important;

My suggestion is to remove the styles you are setting and use the MaxHeight property of the RadComboBox.

I hope this would help you out.

Kind regards,
Dimitar Terziev
the Telerik team

[Marcin]

Hi, The problem is not in CSS. It is in condition on MasterPage. even if css is empty but condition exists, the problem occurs. Only removing condition fixing this problem.

[Dimitar Terziev]

Hello Marcin,

In case the problem is in your condition then you are loading the non IE styles even when IE is used.

Could you verify that this is the problem, since I'm quite confused how this condition would affect your style in other situation?

Best wishes,
Dimitar Terziev
the Telerik team

[Marcin]

No, it is like explained before. I already fixed it by making css hacks not IE conditional html hacks.
Explanation:
I have empty css file.
I'm loading it with condition in html file. After ajax update - all comboboxes on page are wrong in IE 8. No drop down appears.
Removing condition from html - still everything is the same since css was empty - now everything is working fine in IE 8.

Kind Regards