I faced the same problem like in this Telerik Forum Post:
http://www.telerik.com/community/forums/aspnet/splitter/radslidingpane-title-alignment-in-mozilla-firefox.aspx
RadSlidingZone / RadSlidingPane title alignment for Chrome, Firefox as the alignement in Internet Explorer? Telerik Support: "Feature is available only for the IE browser. Prepare images with the text" WTF?, Kidding me?
Having a picture for every language for every RadSlidingPane all over the application. Yes you could generate the pictures on the fly, but i thing this unnecessary! Just some CSS an a little bit of jQuery to get the job done - Have a look at this solution:
Slider.aspx Page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Slider.aspx.cs" Inherits="RadControlsWebApp1.Slider" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="head" runat="server"> <title></title> <telerik:RadStyleSheetManager ID="radStyleSheetManager" runat="server" /> <style type="text/css"> .rspPaneTabText { writing-mode: tb-rl !important; -webkit-transform: rotate(-90deg) !important; -moz-transform: rotate(-90deg) !important; -o-transform: rotate(-90deg) !important; white-space: nowrap !important; height: 120px; width: 120px; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2) !important; font-size: 20px !important; display: block !important; } </style> </head> <body> <form id="form" runat="server"> <telerik:RadFormDecorator runat="server" Skin="Black" ID="radFormDecorator" /> <telerik:RadScriptManager ID="radScriptManager" runat="server"> <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.Core.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQuery.js" /> <asp:ScriptReference Assembly="Telerik.Web.UI, Version=2011.3.1115.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQueryInclude.js" /> </Scripts> </telerik:RadScriptManager> <telerik:RadAjaxManager ID="radAjaxManager" runat="server"> </telerik:RadAjaxManager> <telerik:RadSplitter ID="radSplitter" runat="server" Width="700" Height="500"> <telerik:RadPane ID="LeftPane" runat="server" Width="22px" Scrolling="none"> <telerik:RadSlidingZone ID="slidingZone" runat="server" Width="22px"> <telerik:RadSlidingPane ID="radSlidingPanelA" runat="server" Width="150px" MinWidth="100"> Pane 1 Content </telerik:RadSlidingPane> <telerik:RadSlidingPane ID="radSlidingPanelB" runat="server" Width="150px" MinWidth="100"> Pane 2 Content </telerik:RadSlidingPane> <telerik:RadSlidingPane ID="radSlidingPanelC" runat="server" Width="150px" MinWidth="100"> Pane 3 Content </telerik:RadSlidingPane> </telerik:RadSlidingZone> </telerik:RadPane> </telerik:RadSplitter> <telerik:RadScriptBlock runat="server" ID="radScriptBlock"> <script type="text/javascript"> // ######################## function pageLoad() { $(".rspPaneTabText").html("Search"); $(".rspPaneTabContainer").attr("title", "Search"); $(".rspSlideTitle").html("Search"); } </script> </telerik:RadScriptBlock> </form> </body> </html>
Keine Kommentare:
Kommentar veröffentlichen