fglrxandyou
Top achievements
Rank 1
Rank 1
fglrxandyou
asked on 18 Jul 2007, 02:18 PM
One of the things I'd like to do is have a Tool Tip pop out and appear as a window extension to a tool on the sliding pane... When this happens, it appears off the pane, as well it should. When I move to the item, it proceeds to cause the sliding pane to collapse, as I no longer am hovering over the pane.
Although I have ideas for how to handle this in a backwards sort of way, what I'd like to do instead is..
Set the Sliding Pane background to transparent, and give the items on the pane a background color so it appears that it's smaller than it actually is. Then, when a tooltip pops out, it pops out OVER the transparent, much larger pane..
The visual problem with this is that the title bar then looks longer than the 'element' added-- as long as the transparent background. There is currently no way to modify the title bar's size, that I've found, despite playing around with css via firebug.
I'd like to have the ability to not only resize the titlebar, but also, to remove it entirely. Thanks,
F
Although I have ideas for how to handle this in a backwards sort of way, what I'd like to do instead is..
Set the Sliding Pane background to transparent, and give the items on the pane a background color so it appears that it's smaller than it actually is. Then, when a tooltip pops out, it pops out OVER the transparent, much larger pane..
The visual problem with this is that the title bar then looks longer than the 'element' added-- as long as the transparent background. There is currently no way to modify the title bar's size, that I've found, despite playing around with css via firebug.
I'd like to have the ability to not only resize the titlebar, but also, to remove it entirely. Thanks,
F
1 Answer, 1 is accepted
0
Hello fglrxandyou,
If I understand your scenario correctly, you wish to hide the TitleBar of the RadSlidingPanes.
You can do this either by means of javascript or by modifying the CSS file of the skin you are using. Have a look at the following code fragments for a reference:
Method 1: with javascript:
Method 2: with CSS:
and in the CSS file of the Default skin, append the following:
In case you choose the second approach, you might find interesting the help topics on using custom skins with the Prometheus suite.
Regards,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
If I understand your scenario correctly, you wish to hide the TitleBar of the RadSlidingPanes.
You can do this either by means of javascript or by modifying the CSS file of the skin you are using. Have a look at the following code fragments for a reference:
Method 1: with javascript:
| <body> |
| <script type="text/javascript"> |
| function HandleTitleBar(object, args) |
| { |
| var zone = $find('<%= RadSlidingZone.ClientID %>'); |
| var pane = zone.getPaneById('<%= RadSlidingPane1.ClientID %>'); |
| //hide the title |
| var titleElement = pane.getSlidingContainerTitle().parentNode.parentNode; |
| titleElement.style.display = 'none'; |
| } |
| </script> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" OnClientLoaded="HandleTitleBar"> |
| <telerik:RadPane ID="RadPane1" runat="server" Width="22px" Scrolling="None"> |
| <telerik:RadSlidingZone ID="RadSlidingZone" runat="server" > |
| <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Test" |
| EnableDock="false" EnableResize="false"> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| <asp:Label ID="Label1" runat="server" Text="Show tooltip" ToolTip="My tooltip"> |
| </asp:Label> |
| <telerik:RadToolTip ID="ToolTip1" runat="server" TargetControlID="Label1" Sticky="true"> |
| </telerik:RadToolTip> |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
Method 2: with CSS:
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" |
| Skin="Default" EnableEmbeddedSkins="false"> |
| <telerik:RadPane ID="RadPane1" runat="server" Width="22px" Scrolling="None"> |
| <telerik:RadSlidingZone ID="RadSlidingZone" runat="server" > |
| <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Test" |
| EnableDock="false" EnableResize="false"> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| text <br /> |
| <asp:Label ID="Label1" runat="server" Text="Show tooltip" ToolTip="My tooltip"> |
| </asp:Label> |
| <telerik:RadToolTip ID="ToolTip1" runat="server" TargetControlID="Label1" Sticky="true"> |
| </telerik:RadToolTip> |
| </telerik:RadSlidingPane> |
| </telerik:RadSlidingZone> |
| </telerik:RadPane> |
| <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
and in the CSS file of the Default skin, append the following:
| .RadSplitter_Default .slideHeader |
| { |
| display: none; |
| } |
In case you choose the second approach, you might find interesting the help topics on using custom skins with the Prometheus suite.
Regards,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center