I recently upgraded Ajax Controls Toolkit to latest version and when I opened up my page which I used RadDock, the look and feel just changed. Now, a dock has a black top border which i donno where it came from. I opened up the source and it seems like there's this line:
<div class="rdTopBorder"></div>
<div class="rdBottomBorder"></div>
<img id="ctl00_cphLeftColumn_1_radDock1" style="border-width: 0px;" src="../../library/Company/32/bb_mainbanner.jpg"/>
...
How to change that?
How to change that?
5 Answers, 1 is accepted
0
Alec
Top achievements
Rank 1
Rank 1
answered on 21 Aug 2009, 01:14 AM
Actually the black border appears around the dock. So, another words, each dock now has a black border. How do I disable the border.
Also, I used to be able to mousehover the dock's title and drag things. But now, when I mouse hover the title, the cursor just does nothing. I have to mouse hover the border in order for the cursor to pick up the dock and drag.
Also, I used to be able to mousehover the dock's title and drag things. But now, when I mouse hover the title, the cursor just does nothing. I have to mouse hover the border in order for the cursor to pick up the dock and drag.
0
Sebastian Piu
Top achievements
Rank 1
Rank 1
answered on 21 Aug 2009, 07:14 AM
I'm experiencing the same issue that Alec reports; since the last upgrade the docks have a black border around them. Seems that there were changes to the CSS ?
Is there any upgrade guide or any pointers on how to get the same look and feel that the previous version had?
Regards,
Sebastian
0
Hi,
Regarding the questions:
Also, some screen-shots of how the borders and the cursor looked before and after the upgrade would be of help.
Sincerely yours,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Regarding the questions:
- This should not happen after an upgrade to the latest version.
To remove the borders that surround the RadDock control, all of the CSS classes that style the dock's borders have to be overriden. Here is a source code that will make the borders disappear to all of the RadDocks present on the page:
<head> <style id="Style1" type="text/css" runat="server"> .rdSideBorders, .rdTopBorder, .rdBottomBorder, .rdTitlebar { border: 0 !important; } </style> </head>
In case this does not meet your requirements, please send us a simple running project where we can observe this behavior of the RadDock control. - Regarding the issue with the mouse cursor - everything seems to be working fine. You can see this on our online demos. Again, we need more information about the problem in order to offer an adequate solution.
Also, some screen-shots of how the borders and the cursor looked before and after the upgrade would be of help.
Sincerely yours,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Alec
Top achievements
Rank 1
Rank 1
answered on 25 Aug 2009, 12:36 AM
Thanks.
The second problem is, my dock cannot be dragged because i have to use css to hide the contain inside the raddock
e.g.
.contentlibrary .radDock img{
display:none;
}
This is so that my list of docks only show their titles and when i click on a dock, i can just drag into another area and it is in that area that the image will show up.
It used to work, but since I upgraded to the latest version, the title bar of the raddock is no longer draggable. I have to display the image (raddock's content) in order to drag a dock. The curson only changed to draggable in the dock's content or the dock's border. If i mouse hover the title bar, the cursor does nothing.
Is there any work around?
The second problem is, my dock cannot be dragged because i have to use css to hide the contain inside the raddock
e.g.
.contentlibrary .radDock img{
display:none;
}
This is so that my list of docks only show their titles and when i click on a dock, i can just drag into another area and it is in that area that the image will show up.
It used to work, but since I upgraded to the latest version, the title bar of the raddock is no longer draggable. I have to display the image (raddock's content) in order to drag a dock. The curson only changed to draggable in the dock's content or the dock's border. If i mouse hover the title bar, the cursor does nothing.
Is there any work around?
0
Hi Alec,
I followed your steps exactly and created a sample project, but still cannot reproduce your problem. Here is what I am doing:
Regards,
Pero
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 followed your steps exactly and created a sample project, but still cannot reproduce your problem. Here is what I am doing:
- I placed an image inside the RadDock's content container and set its display:attribute to none.
- The EnableDrag property of the RadDock is set to false and the RadDock is collapsed.
- When the titlebar is clicked the dock dragging is enabled and the dock can be dragged by its titlebar.
- I drag the dock from its original zone and drop it onto a new zone where I show the image and expand the RadDock.
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!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="Head1" runat="server"> |
| <title></title> |
| <style type="text/css"> |
| img |
| { |
| display: none; |
| } |
| </style> |
| <script type="text/javascript"> |
| function dockInitialize(dock, args) |
| { |
| var dockElement = dock.get_element(); |
| if ($telerik.isIE) |
| { |
| dockElement.attachEvent('onclick', SetHandle); |
| } |
| else |
| { |
| dockElement.addEventListener('click', SetHandle, false); |
| } |
| } |
| function SetHandle() |
| { |
| var dock = $find("RadDock1"); |
| var dockElement = dock.get_element(); |
| //enable drag |
| dock.set_enableDrag(true); |
| if ($telerik.isIE) |
| { |
| dockElement.detachEvent('onclick', SetHandle); |
| } |
| else |
| { |
| dockElement.removeEventListener('click', SetHandle, false); |
| } |
| } |
| function OnDragEnd(dock, args) |
| { |
| if (dock.get_dockZoneID() == "RadDockZone2") |
| { |
| dock.set_collapsed(false); |
| var image = $get("dockDrag"); |
| image.style.display = "block"; |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <div> |
| <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> |
| <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="300px"> |
| <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Height="100px" Title="RadDock-Title" |
| OnClientInitialize="dockInitialize" EnableDrag="false" Collapsed="true" OnClientDragEnd="OnDragEnd"> |
| <ContentTemplate> |
| <img id="dockDrag" src="http://demos.telerik.com/aspnet-ajax/dock/examples/setdraghandleclientside/Img/drag.gif" |
| alt="dockDrag" /> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| <telerik:RadDockZone ID="RadDockZone2" runat="server" Height="300px" Width="300px"> |
| </telerik:RadDockZone> |
| </telerik:RadDockLayout> |
| </div> |
| </form> |
| </body> |
| </html> |
Regards,
Pero
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.