I have an aspx page with two telerik RadDockZones so that when the page is expanded I have two columns on the page displaying a list of RadDocks. I need to convert to this to one column (or no columns really) where the RadDockzone and the RadDocks take up the width of the page. It was easy to make the display one (or no) column -- I just removed the 2nd RadDockZone tag (and associated tags) so that the RadDocks on the right side of the page are now directly under the RadDocks on the left side of the page. The problem I am having is that I need the RadDockZone and the RadDocks to take up the width of the page. How to do this? I was able to hardcode a value in the width of the RadDockZone (but that is hardcoded -- I need auto) and the RadDocks reference a class in Dock.Custom.css. This .css file is reference by several other pages in the web app. I will list a bit of the markup for the RadDockZone/RadDock and list the content of the Dock.Custom.css file. I would appreciate any suggestions how to proceed from here on making the RadDockZon/RadDocks auto width (without affecting all the other pages in the web app)
................................some markup from the .aspx page -- Skin ="Custom" this is the css class for the RadDock
<div style="float: left; padding-left: 5px;">
<telerik:RadDockZone ID="LeftRadDockZone" FitDocks="False" Width="955px" Height="610px" runat="server">
<telerik:RadDock ID="PersonalInformationRadDock" Title="Personal Information" DefaultCommands="ExpandCollapse"
DockMode="Docked" EnableRoundedCorners="True" Collapsed="False" EnableEmbeddedSkins="False"
Skin="Custom" EnableDrag="False" runat="server">
<ContentTemplate>
<table id="ExecutiveDescriptionTable">
<tr>
..........
And here is the .css file with the custom class -- how to make RadDockZone/RadDock autowidth?
...............................................
.RadDock_Custom
{
height: 220px !important;
width: 640px !important;
}
.RadDock_Custom .rdMiddle .rdLeft,
.RadDock_Custom .rdMiddle .rdRight {
background-image: url('../Images/VerticalSprite.gif'); }
.RadDock_Custom .rdTop .rdLeft,
.RadDock_Custom .rdTop .rdRight,
.RadDock_Custom .rdTop .rdCenter,
.RadDock_Custom .rdBottom .rdLeft,
.RadDock_Custom .rdBottom .rdRight,
.RadDock_Custom .rdBottom .rdCenter {
background-image: url('../Images/HorizontalSprite.png');
}
.RadDock_Custom .rdCenter .rdCommands a span {
background-image: url('../Images/CommandSprite.gif') }
.RadDock_Custom .rdMiddle .rdCenter,
.RadDock_Custom .rdBottom .rdCenter {
background-color: white; }
.RadDock_Custom .rdTitleBar em {
color: white !important;
font-size:12pt !important;
font-family:"Segoe UI", Arial, sans-serif;
font-weight:bold !important;}
.RadDock_Custom .rdContent
{
background-repeat:repeat-y;
background-position:left;
margin:10px auto;
height:190px !important;
width:620px !important;
color:black !important;
font-family:"Segoe UI", Arial, sans-serif;
line-height:16pt !important;
text-align:justify;
font-size:12px !important;
vertical-align:bottom !important}
.RadDock_Custom .rdTitleBar, .rdTitle {
background:#476bb3;}
...........................................