RadSlidingZone: "width" issues under Chrome and Safari

6 posts, 0 answers
  1. tmlipinski
    tmlipinski avatar
    131 posts
    Member since:
    Dec 2006

    Posted 30 Oct 2009 Link to this post

    Hi,

    I got a ridiculous problem trying to set a predefined width of a RadSlidingPane, containing a RadPanelBar. To do this, I set Width of the RadSlidingBar, the RadPanelBar and all its RadPaneItems. Under IE, FF or Opera it works fine. But under Chrome and Safari it (I mean: whether it works or not) depends on.... the length of the RadSlidingPane's Title. If it is short - all is OK. But when it is longer - the RadPanelBar becomes narrow and gets horizontal scrollbars. When the title is "Pane" - it is OK. when the title is just "RadSlidingPane", it starts with scrollbars but after undocking / docking sequence the scrollbars disappear. When it is "RadSlidingPane ext." - it behaves as described (but after docking / undocking the RadPanelBar is wider but not wide enough).

    The simplest markup is as follows:
      <telerik:RadSplitter ID="splitterMain" runat="server" Width="100%">  
        <telerik:RadPane ID="paneLeft" runat="server" Width="22px">  
          <telerik:RadSlidingZone ID="slzoneLeft" runat="server" Width="22px" DockedPaneId="slpaneLeft">  
            <telerik:RadSlidingPane ID="slpaneLeft" runat="server" Title="RadSlidingPane ext." Width="155px">  
              <telerik:RadPanelBar runat="server" ID="pbarLeftNavigator" Width="152px">  
                <Items> 
                  <telerik:RadPanelItem Text="Group 1" Width="150px">  
                    <Items> 
                      <telerik:RadPanelItem Text="Action 1" Width="150px" /> 
                      <telerik:RadPanelItem Text="Action 2" Width="150px" /> 
                    </Items> 
                  </telerik:RadPanelItem> 
                </Items> 
              </telerik:RadPanelBar> 
            </telerik:RadSlidingPane> 
          </telerik:RadSlidingZone> 
        </telerik:RadPane> 
        <telerik:RadPane ID="paneContent" runat="server" BorderStyle="Solid" BorderWidth="1">  
          The content  
        </telerik:RadPane> 
      </telerik:RadSplitter> 
     

    Is it my fault, your fault - or the browser's fault?

    Regards
    Tomasz
  2. Otto Neff
    Otto Neff avatar
    36 posts
    Member since:
    Jul 2011
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. SubramaniaDiwakaran
    SubramaniaDiwakaran avatar
    2 posts
    Member since:
    Feb 2012

    Posted 19 Mar 2012 Link to this post

    Hi,

    the mentioned link loads only one tab page. If i have to load multiple tab pages in the radslidingpanel how can i do that?

  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 22 Mar 2012 Link to this post

    Hello,

    If I understand you correctly, you want to modify the visualization of the SlidingPane Tab's text to be rotated under all browsers. Please take a look at the following forum thread discussing this case:
    http://www.telerik.com/community/forums/aspnet-ajax/splitter/splitter-tab-text-orientation---solution.aspx

    If this is not the case, could you please describe in more details what exactly you are trying to achieve?

    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.
  6. SubramaniaDiwakaran
    SubramaniaDiwakaran avatar
    2 posts
    Member since:
    Feb 2012

    Posted 23 Mar 2012 Link to this post

    Your solution is exactly right if i have to use images. But i do not want to use images. instead i have seen another forum saying that using JQuery, we can apply the text whatever we want which works fine again. (I had refered the following url)
    http://ext-net.blogspot.in/2011/12/telerik-radslidingpane-title.html

    My problem is little different. In the given emaple solution, all two tab text are applied as "Search". But i want to display different title for each tab. I am stuck here. Could you pl help me out?

    Thanks,
    Diwakaran.
  7. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 27 Mar 2012 Link to this post

    Hi Diwakaran,

    The blog post that you are referring to is using jQuery to replace the content of the sliding pane's tab with custom text and change the default rendering of the element and uses CSS to rotate the text. It might seems that the provided solution might seems to work at first, however, it is using static text and size for the tabs and this is not recommended.

    The root of the problem is that when the text inside the sliding pane's tab is rotated using CSS the margins and the paddings of the element are not processed properly and RadSplitter cannot calculate the size the tab. That is why we recommend using images to produce the same appearance under different browsers.

    In the the forum thread that I linked in my previous answer you can find a sample solution on how to dynamically generate image to be used for the Tab's.

    Regards,
    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
UI for ASP.NET Ajax is Ready for VS 2017