Double Rad Split Bar in Compatibility Mode

4 posts, 0 answers
  1. George
    George avatar
    3 posts
    Member since:
    Oct 2011

    Posted 10 Oct 2011 Link to this post

    We are seeing double rad split bars (only horizontal bars) when using IE 7 and 8/9 in compatibilty mode. Is there any way to fix this problem? I have attached a picture to show the double rad split bar.


    Here's the code we're using:

    <div style="width:100%;height:100%;" id="divcontent">
                <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" VisibleDuringInit="false">
                    <telerik:RadPane ID="RadPane1_Left" runat="server" Scrolling="None">
                        <telerik:RadSplitter ID="RadSplitter2" SplitBarSize="0" runat="server" Orientation="Horizontal" PanesBorderSize="0" BorderSize="0">
                            <telerik:RadPane ID="RadPane1_menu" runat="server" Scrolling="None">
                                <asp:ContentPlaceHolder ID="RecordLockingBar" runat="server">
                                </asp:ContentPlaceHolder>
                                <asp:ContentPlaceHolder ID="ToolbarContent" runat="server">
                                </asp:ContentPlaceHolder>
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="None" EnableResize="false" CssClass="dcursor" />
                            <telerik:RadPane ID="RadPane1_Left_Top" runat="server">
                                <asp:ContentPlaceHolder ID="FormBodyContent" runat="server">
                                </asp:ContentPlaceHolder>
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Backward" />
                            <telerik:RadPane ID="RadPane1" runat="server" Height="300px" Collapsed="True">
                                <asp:ContentPlaceHolder ID="FormFooterContent" runat="server">
                                </asp:ContentPlaceHolder>
                            </telerik:RadPane>
                        </telerik:RadSplitter>                    
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Backward" />
                    <telerik:RadPane ID="RadPane1_Right" BackColor="#e4eaf6" runat="server" Width="200px">
                        <asp:ContentPlaceHolder ID="FormRightContent" runat="server">
                        </asp:ContentPlaceHolder>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </div>


    Any help is appreciated! Thanks!
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 11 Oct 2011 Link to this post

    Hi George,

    I tried to reproduce the problem with the provided code snippet but to no avail. I noticed that you have a  custom CssClass set to one of the splitbars and an id set to the wrapper <div>. It is possible a custom global CSS to overwrite some of the default properties of RadSplitbar and that may cause the observed issue. Could you please try to remove all custom CSS registered on the page and see if the problem still occurs? However, to be able to provide more to the point answer we will need to reproduce and examine the problem locally, could you please open a formal support ticket and provide a fully runnable sample project reproducing the issue?

    All the best,
    Dobromir
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. George
    George avatar
    3 posts
    Member since:
    Oct 2011

    Posted 11 Oct 2011 Link to this post

    I found this line in our css file causes the issue:

    select, option, input, td, div, textarea, span, label, button {font-family: Verdana, Helvetica, Arial; font-size: 11px;}

    If I take that line out, it looks fine in compatibility mode. Do you know what that line would cause that?
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 11 Oct 2011 Link to this post

    Hi George,

    Try to add the following bit of code to your CSS to restore the default value of RadSplitter:
    *+html .RadSplitter .rspResizeBarHorizontal div {font-size: 1px !important;}

    On a side note, using global CSS selectors when working with third-party controls is highly not recommended. As you have already noticed it may cause some visualization glitches.

    Best wishes,
    Dobromir
    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