[Solved] RadPanelItem does not collapse as expected in Internet Explorer but works fine in Firefox

[Satyaprakash J]

The following piece of code does not render properly in Internet Explorer, but it works fine in Firefox. I have attached the screenshots IEPanelBar.jpg and FirefoxPanelBar.jpg.  I would like to have the first Panel Item Expanded and the second Panel Item collapsed as shown in the screenshot FirefoxPanelBar.jpg. I would like to have the second PanelItem collapsed by default as show in the screenshot FirefoxPanelBar.jpg. Please let me know of any fix for this issue.

<telerik:RadPageView ID="radPageViewAdvancedSearch" runat="server" Width="100%">
                <telerik:RadPanelBar ID="radPanelBarAssetListFilter" runat="server" Width="100%">
                    <Items>
                        <telerik:RadPanelItem Text="Valuation Queue Filter " Expanded="True" PostBack="false">
                            <Items>
                                <telerik:RadPanelItem runat="server" BackColor="#E7F1FF" Text="">
                                    <ItemTemplate>
                                            <div class="span-24 height-1">
                                            <runway:AssetListSearchFilter ID="runwayAssetListSearchFilter" runat="server"
                                            FilterLabelCssClass="span-4 color-a-4 basic-filter-label"
                                            FilterFirstColumnCssClass="span-12 last advanced-search-filter"
                                            FilterSecondColumnCssClass="span-12 last advanced-search-filter"
                                            FilterEmptyName="AssetSearchParamWide"
                                            FilterDateTimeToLabelCssClass="color-a-4 datetime-label"
                                            FilterContainerCssClass="span-8 last"
                                            FilterFromTextBoxCssClass="AdvancedSearchText"
                                            FilterToTextBoxCssClass="AdvancedSearchText"/>
                                            </div>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
                <br />
                <telerik:RadPanelBar ID="radPanelBarAssetFilter" runat="server" Width="100%">
                    <Items>
                        <telerik:RadPanelItem Text="Asset Filter" Expanded="False"  PostBack="false">
                            <Items>
                                <telerik:RadPanelItem runat="server" BackColor="#E7F1FF" Text="">
                                    <ItemTemplate>
                                            <div class="span-24 height-1">
                                            <runway:AssetSearchFilter ID="runwayAssetSearchFilter" runat="server"
                                            FilterLabelCssClass="span-4 color-a-4 basic-filter-label"
                                            FilterFirstColumnCssClass="span-12 advanced-search-filter"
                                            FilterSecondColumnCssClass="span-12 last advanced-search-filter"
                                            FilterEmptyName="AssetSearchParamWide"
                                            FilterDateTimeToLabelCssClass="color-a-4 datetime-label"
                                            FilterContainerCssClass="span-8 last"
                                            FilterFromTextBoxCssClass="AdvancedSearchText"
                                            FilterToTextBoxCssClass="AdvancedSearchText"/>
                                        </div>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
        </telerik:RadPageView>

Thanks
Satyaprakash J

[Paul]

Hello Satyaprakash J,

Maybe you've hit the notorious limitation of Internet Explorer - it can load up to 32 CSS files and if there are more, they will be ignored. This problem can occur in case you are using a theme with a lot of CSS (when you register the theme, automatically all the CSS is declared) or you have declared a lot of RadControls on the page. If you are using a theme you can test my assumption by removing it and test whether the RadTabStrip CSS will load correctly.

If this is the case I suggest to either use a RadStyleSheetManager which will combine all the CSS on the page or reduce the CSS files used.

Regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Satyaprakash J]

Hi Paul,
         Thank you for your quick response. The problem was due to the IE limit of loading only 32 css files.

Thanks
Satyaprakash J