RadSlidingZone Skinning Issue After Upgrade

5 posts, 0 answers
  1. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 26 Mar 2014 Link to this post

    I am attempting to upgrade a .Net web app with Telerik RadControls Q3 2011 to Q3 2013 and have run into skinning issues with the RadSlidingZone.  The browser is also being upgraded from IE8 running in Compatibility View to IE11 in Edge Mode.

    ​Attached (IE8_RadSlidingZone.jpg) is what the RadSlidingZones on the far left used to look like and needs to maintain its appearance.

    Attached (IE11_RadSlidingZone.jpg) is what the RadSlidingZones look like after upgrading the Telerik .dll's and running in IE11. 

    The issue is the size/height of each sliding zone has shrunk down so that the text is unreadable.

    <telerik:RadPane runat="server" ID="pNav" SkinID="pLNav" Height="100%" OnClientExpanded="pNav_ClientExpanded">
        <div id="DivSLZone" runat="server" style="float: left; clear: none; width: 22px;
            height: 100%;" class="tabsContainer">
            <telerik:RadSlidingZone ID="slZone" runat="server" SlideDirection="Right" ClickToOpen="true"
                Width="22">
                <telerik:RadSlidingPane ID="slPane1" Title="Tab 1 Title" runat="server" Width="275"
                    EnableDock="false" Height="100px">
                    <div runat="server" id="divSlPane1">
                    </div>
                </telerik:RadSlidingPane>
                <telerik:RadSlidingPane ID="slPane2" Title="Tab 2 Title" runat="server" Width="275"
                    EnableDock="false" Height="100%">
                    <div runat="server" id="divSlPane2">
                    </div>
                </telerik:RadSlidingPane>
                <telerik:RadSlidingPane ID="slPane3" Title="Tab 3 Title" runat="server" Width="275"
                    EnableDock="false" Height="100%" OnClientExpanded="slPane3_ClientExpanded" OnClientCollapsed="slPane3_ClientCollapsed">
                    <div runat="server" id="divSlPane3">
                    </div>
                </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
        </div>
        <div style="height: 100%;">
            <asp:PlaceHolder runat="server" ID="phLeft" />
        </div>
    </telerik:RadPane>

    .tabsContainer, .rspTabsContainer {
        background: #B0C4DE !important;
        border-right: #336699 1px solid !important;
    }

    Any suggestions?

    Thanks,

    Rob
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 27 Mar 2014 Link to this post

    Hi,

    We are aware of this issue and it has been already logged into our bug tracking system. You can track its progress and vote for it here: The Title of a SlidingPane tab is truncated in IE11 and IE8.

    The only workaround I could provide is to hardcore the tabs height:

    <head runat="server">
        <title></title>
        <style>
            .rspPaneTabContainer {
                height: 50px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
            <telerik:RadSplitter runat="server">
     
     
                <telerik:RadPane runat="server" ID="pNav" SkinID="pLNav" Height="100%">
                    <div id="DivSLZone" runat="server" style="float: left; clear: none; width: 22px; height: 100%;"
                        class="tabsContainer">
                        <telerik:RadSlidingZone ID="slZone" runat="server" SlideDirection="Right" ClickToOpen="true"
                            Width="22">
                            <telerik:RadSlidingPane ID="slPane1" Title="Tab 1 Title" runat="server" Width="275"
                                EnableDock="false" Height="100px">
                                <div runat="server" id="divSlPane1">
                                </div>
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="slPane2" Title="Tab 2 Title" runat="server" Width="275"
                                EnableDock="false" Height="100%">
                                <div runat="server" id="divSlPane2">
                                </div>
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="slPane3" Title="Tab 3 Title" runat="server" Width="275"
                                EnableDock="false" Height="100%">
                                <div runat="server" id="divSlPane3">
                                </div>
                            </telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </div>
                    <div style="height: 100%;">
                        <asp:PlaceHolder runat="server" ID="phLeft" />
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
     
        </form>
    </body>
    </html>

    The only thing is that if you have different labels they will need a different height, so you will need to target it through the item ID.

    <head runat="server">
        <title></title>
        <style>
            #RAD_SLIDING_PANE_TAB_slPane1 {
                height: 50px;
            }
     
             #RAD_SLIDING_PANE_TAB_slPane2 {
                height: 70px;
            }
     
              #RAD_SLIDING_PANE_TAB_slPane3 {
                height: 90px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
            <telerik:RadSplitter runat="server">
     
     
                <telerik:RadPane runat="server" ID="pNav" SkinID="pLNav" Height="100%">
                    <div id="DivSLZone" runat="server" style="float: left; clear: none; width: 22px; height: 100%;"
                        class="tabsContainer">
                        <telerik:RadSlidingZone ID="slZone" runat="server" SlideDirection="Right" ClickToOpen="true"
                            Width="22">
                            <telerik:RadSlidingPane ID="slPane1" Title="Tab 1 Title" runat="server" Width="275"
                                EnableDock="false" Height="100px">
                                <div runat="server" id="divSlPane1">
                                </div>
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="slPane2" Title="Tab 2 Title" runat="server" Width="275"
                                EnableDock="false" Height="100%">
                                <div runat="server" id="divSlPane2">
                                </div>
                            </telerik:RadSlidingPane>
                            <telerik:RadSlidingPane ID="slPane3" Title="Tab 3 Title" runat="server" Width="275"
                                EnableDock="false" Height="100%">
                                <div runat="server" id="divSlPane3">
                                </div>
                            </telerik:RadSlidingPane>
                        </telerik:RadSlidingZone>
                    </div>
                    <div style="height: 100%;">
                        <asp:PlaceHolder runat="server" ID="phLeft" />
                    </div>
                </telerik:RadPane>
            </telerik:RadSplitter>
     
        </form>
    </body>
    </html>


    Please, excuse us for any inconveniences caused.


    Regards,
    Bozhidar
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2014 in reply to Bozhidar Link to this post

    I got your first suggestion to work, kind of.  I was able to set the height of all 3 sliding panes with the rspPaneTabContainer style, but the text is now truncated.  Please see attachment and advise.

    Your 2nd suggestion for setting different heights to individual sliding panes did not work at all for me. I even tried using the ClientID (ctl00_cpB_slPane1, ctl00_cpB_slPane2, & ctl00_cpB_slPane3) to no avail.
  5. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2014 in reply to Bozhidar Link to this post

    OK, I figured out how my styling ID issue.  Below is what works.  I'm still experiencing the truncated text issue as mentioned previously.

    ​#RAD_SLIDING_PANE_TAB_ctl00_cpB_slPane1 {
    height: 50px;
    }

    #RAD_SLIDING_PANE_TAB_ctl00_cpB_slPane2 {
    height: 70px;
    }

    #RAD_SLIDING_PANE_TAB_ctl00_cpB_slPane3 {
    height: 90px;
    }


    }
  6. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 31 Mar 2014 Link to this post

    Hello,

    I have tested in all browsers the code that was provided in the previous message and the result is fine in all of them. Attached is an image showing the result in the browser.

    Do you have any additional CSS attached to the page that could cause the issue shown on your screenshot? Could you try to remove it, and check if the problem still exists? If it still exist, we will need a runnable code example that reproduces it, so we would be able to test it locally and to provide a proper solution.

    Regards,
    Bozhidar
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017