This is a migrated thread and some comments may be shown as answers.

RadSlidingZone: "width" issues under Chrome and Safari

5 Answers 146 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
tmlipinski
Top achievements
Rank 1
tmlipinski asked on 30 Oct 2009, 09:28 PM
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

5 Answers, 1 is accepted

Sort by
0
Otto Neff
Top achievements
Rank 2
answered on 21 Dec 2011, 09:51 AM
0
SubramaniaDiwakaran
Top achievements
Rank 1
answered on 19 Mar 2012, 12:05 PM
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?

0
Dobromir
Telerik team
answered on 22 Mar 2012, 04:00 PM
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.
0
SubramaniaDiwakaran
Top achievements
Rank 1
answered on 23 Mar 2012, 06:55 AM
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.
0
Dobromir
Telerik team
answered on 27 Mar 2012, 04:26 PM
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.
Tags
Splitter
Asked by
tmlipinski
Top achievements
Rank 1
Answers by
Otto Neff
Top achievements
Rank 2
SubramaniaDiwakaran
Top achievements
Rank 1
Dobromir
Telerik team
Share this question
or