Hi telerik team,
I have got an issue when I am using RadDock.
The code was copy from the other thread in this forum.
I would like to fill the dock with a Div 100% height and width.
Radtreeview with no docking:
Radtreeview with docking:
before
after collapse
Expands
I have got an issue when I am using RadDock.
The code was copy from the other thread in this forum.
I would like to fill the dock with a Div 100% height and width.
Radtreeview with no docking:
Radtreeview with docking:
before
after collapse
Expands
5 Answers, 1 is accepted
0
Edgar
Top achievements
Rank 1
answered on 29 Jan 2014, 03:24 AM
0
Edgar
Top achievements
Rank 1
answered on 29 Jan 2014, 03:26 AM
<div style="width:20%; height:100%; float:left;" >
<telerik:RadDockLayout ID="RadDockLayout1" runat="server">
<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="98%" Width="98%" BorderColor="Transparent">
<telerik:RadDock ID="RadDock1" runat="server" DockMode="Docked" EnableRoundedCorners="true" EnableDrag="false" DefaultCommands="None" Width="100%" Height="100%">
<ContentTemplate>
<telerik:RadTreeView ID="RadTreeView1" Runat="server" BackColor="Yellow" Skin="Outlook" OnNodeClick="RadTreeView1_NodeClick" Width="100%" Height="100%">
</telerik:RadTreeView>
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</telerik:RadDockLayout>
</div>
<telerik:RadDockLayout ID="RadDockLayout1" runat="server">
<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="98%" Width="98%" BorderColor="Transparent">
<telerik:RadDock ID="RadDock1" runat="server" DockMode="Docked" EnableRoundedCorners="true" EnableDrag="false" DefaultCommands="None" Width="100%" Height="100%">
<ContentTemplate>
<telerik:RadTreeView ID="RadTreeView1" Runat="server" BackColor="Yellow" Skin="Outlook" OnNodeClick="RadTreeView1_NodeClick" Width="100%" Height="100%">
</telerik:RadTreeView>
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</telerik:RadDockLayout>
</div>
0
Edgar
Top achievements
Rank 1
answered on 29 Jan 2014, 03:29 AM
The sample I copy there.
http://www.telerik.com/forums/radock-resize-vertically
http://www.telerik.com/forums/radock-resize-vertically
0
Hi Edgar,
The RadDock has a fixed width, configured in pixels, so fitting its content in the ContentContainer of the control is not possible out of the box. Also, there is a small distance between the edge of the dock and its content.
Nevertheless, you could use custom script to configure the width of the dock according to its content and you can set it RenderMode to Lightweight in order to remove the space at the edge easily. Please check the attached sample and use it as a reference for achieving the desired result.
Regards,
Slav
Telerik
The RadDock has a fixed width, configured in pixels, so fitting its content in the ContentContainer of the control is not possible out of the box. Also, there is a small distance between the edge of the dock and its content.
Nevertheless, you could use custom script to configure the width of the dock according to its content and you can set it RenderMode to Lightweight in order to remove the space at the edge easily. Please check the attached sample and use it as a reference for achieving the desired result.
Regards,
Slav
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
Edgar
Top achievements
Rank 1
answered on 04 Feb 2014, 03:45 PM
Thank's Slav,
I found that I add height:100% !important; like this:
<style type="text/css">
div.RadDock .rdContent {
margin: 0;
height:100% !important;
}
</style>
and it is working now.
I also found how to make div 100% height & width in the browser:
<style type="text/css">
.main {
top:0;
bottom:0;
left:0;
right:0;
min-width:1024px;
min-height:768px;
position:absolute;
}
</style>
Thanks a lot
Edgar
I found that I add height:100% !important; like this:
<style type="text/css">
div.RadDock .rdContent {
margin: 0;
height:100% !important;
}
</style>
and it is working now.
I also found how to make div 100% height & width in the browser:
<style type="text/css">
.main {
top:0;
bottom:0;
left:0;
right:0;
min-width:1024px;
min-height:768px;
position:absolute;
}
</style>
Thanks a lot
Edgar