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