I am using a RadSlidingPane, with the TabView set to ImageOnly. The splitter's orientation is horizontal. The sliding pane is the only tab in the sliding zone, and it occupies 100% of the available width. I am trying to get the image referenced by the sliding pane's iconurl attribute, to align horizontally in the center of the tab. I am working with a customized version of the Outlook skin. Can you please show me how to accomplish this with the Outlook skin.
Thanks,
Kory
Thanks,
Kory
3 Answers, 1 is accepted
0
Hi Kory,
I tested with the latest version of the RadSplitter for ASP.NET AJAX control and its Outlook skin - when I changed the Width of the tabs, the image displayed in the middle of the tab automatically. Could you please post you RadSplitter definition here as well as the CSS from your custom skin? I would additionally need the exact version of the Telerik.Web.UI.dll that you use and the version from which you took the original Outlook skin.
Kind regards,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
I tested with the latest version of the RadSplitter for ASP.NET AJAX control and its Outlook skin - when I changed the Width of the tabs, the image displayed in the middle of the tab automatically. Could you please post you RadSplitter definition here as well as the CSS from your custom skin? I would additionally need the exact version of the Telerik.Web.UI.dll that you use and the version from which you took the original Outlook skin.
Kind regards,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Shahryar Ali
Top achievements
Rank 1
Rank 1
answered on 12 May 2010, 05:40 PM
This sounds like a problem I am also having. So, my question is, how do you set the Width of the tab? I tried inserting a Width property into the RadSlidingZone, RadSlidingPane, no luck. The Tab has an IconUrl property set, but there's extra space around both sides of the image, and it looks odd.
Thanks,
Shahryar
Thanks,
Shahryar
0
Hi Shahryar,
The extra space that you see is a result of the padding and margin style settings, defined in the skin of the splitter control. In case you want to remove those, you can use the following CSS selectors:
In case you want to make more changes to the skin of the splitter, I would recommend that you create a custom skin. For information on custom skins, please refer to our online documentation:
Greetings,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
The extra space that you see is a result of the padding and margin style settings, defined in the skin of the splitter control. In case you want to remove those, you can use the following CSS selectors:
<head runat="server"> <title></title> <style type="text/css"> .RadSplitter .rspTop div.rspPaneTabContainer, .RadSplitter .rspBottom div.rspPaneTabContainer { padding: 0; } .RadSplitter .rspPaneTabContainer .rspPaneTabIcon { margin: 0; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal"> <telerik:RadPane ID="RadPane1" runat="server" Height="50px" Scrolling="None"> <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" SlideDirection="Bottom" Height="50px"> <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Pane 1" TabView="ImageOnly" IconUrl="SlidingPaneIcon.jpg"> </telerik:RadSlidingPane> </telerik:RadSlidingZone> </telerik:RadPane> <telerik:RadPane ID="RadPane2" runat="server"> </telerik:RadPane> <telerik:RadPane ID="RadPane3" runat="server" Height="50px" Scrolling="None"> <telerik:RadSlidingZone ID="RadSlidingZone2" runat="server" SlideDirection="Top" Height="50px"> <telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Title="Pane 1" TabView="ImageOnly" IconUrl="SlidingPaneIcon.jpg"> </telerik:RadSlidingPane> </telerik:RadSlidingZone> </telerik:RadPane> </telerik:RadSplitter> </form></body>In case you want to make more changes to the skin of the splitter, I would recommend that you create a custom skin. For information on custom skins, please refer to our online documentation:
- http://www.telerik.com/help/aspnet-ajax/controlling-appearance-overview.html
- http://www.telerik.com/help/aspnet-ajax/splitter_appearancecontrollingappearance.html
Greetings,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.