Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > RadSlidingZone: "width" issues under Chrome and Safari

• tmlipinski Intermediate

  Posted on Oct 30, 2009 (permalink)

  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

  Reply

• one

  Posted on Dec 21, 2011 (permalink)

  Have a look at this
  
  http://ext-net.blogspot.com/2011/12/telerik-radslidingpane-title.html

  Reply


• SubramaniaDiwakaran

  Posted on Mar 19, 2012 (permalink)

  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?
  
  

  Attached files

  • ran-sliding-panel.gif

  Reply

• Dobromir Dobromir

  Posted on Mar 22, 2012 (permalink)

  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.

  Reply

• SubramaniaDiwakaran

  Posted on Mar 23, 2012 (permalink)

  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.
  

  Reply

• Dobromir Dobromir

  Posted on Mar 27, 2012 (permalink)

  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.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > RadSlidingZone: "width" issues under Chrome and Safari