This is a migrated thread and some comments may be shown as answers.

Removing extra space outside the DIV inside RadDock content

3 Answers 102 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Hiren
Top achievements
Rank 1
Hiren asked on 31 Dec 2010, 02:05 PM
i have created dockable DIV inside raddock with controls inside DIV, after doing that i have noticed the extra space in radContent, i tried applying css but not got the result as i expected, for your reference i am attaching the output modified image.

my problem is i want radDock to fit the width with the DIV no extra space required outside the div.
check the image[i have specified background for content to silver color] its appearing right side and bottom side of the DIV
CSS applied for DOCK.
.profileBlue
        {
            width: 126px;
        }
        .profileBlue .top
        {
            width: 126px;
            height: 8px;
            background: url(/images/profileBlueTop.jpg) no-repeat top left;
        }
        .profileBlue .middle
        {
            width: 106px;
            background-color: #cde6ec;
            height: auto;
            padding: 0 10px 0 10px;
            word-wrap: break-word;
            color: #323232;
            line-height: 20px;
        }
.RadDock .rdLeft, .RadDock .rdRight, .RadDock .rdBottom, .RadDock .rdTop
        {
            display: none !important;
        }
        .RadDock .rdContent
        {
            background-color: Silver;
        }
        .RadDockZone
        {
            width: 140px;
        }
    </style>
 
    <script type="text/javascript">
        function SetHandleDock(dock, args) {
            dock.set_handle(document.getElementById("Handle_" + dock.get_id()));
        }
    </script>

aspx code
<telerik:RadDockZone ID="RadDockZone1" runat="server">
      <telerik:RadDock ID="RadDock1" runat="server" DockHandle="None" OnClientInitialize="SetHandleDock" Index="0" EnableRoundedCorners="True" DockMode="Docked"> <ContentTemplate>
 <div class="profileBlue">
    <div id="Handle_RadDock1" style="cursor: move;" class="top">
    </div>
    <div class="middle">
      - - - - - - - my code ---
    </div>
 </div>
</ContentTemplate>
</telerik:RadDock>

3 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 03 Jan 2011, 04:18 PM
Hi Giri,

By design, when RadDock is placed inside a vertically oriented DockZone it occupies the entire zone width. To avoid this behavior you need to set the RadDockZone property FitDocks to False and set the required size to the RadDock, e.g.:
<telerik:RadDockZone ID="RadDockZone1" runat="server" FitDocks="false">
<telerik:RadDock ID="RadDock1" runat="server" DockHandle="None" OnClientInitialize="SetHandleDock"
    Index="0" EnableRoundedCorners="True" DockMode="Docked" Width="126px">
    <ContentTemplate>
        <div class="profileBlue">
            <div id="Handle_RadDock1" style="cursor: move;" class="top">
            </div>
            <div class="middle">
                - - - - - - - my code ---
            </div>
        </div>
    </ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>

More information regarding DockZone orientation is available in the following help article:
Zone Orientation

Regarding the extra space in the bottom, I was unable to reproduce it locally with the provided sample code. If the content of the <div class="middle"> is an image, by default images are inline elements and have saved extra space in the bottom. If this is the case you can avoid this behavior by setting the display:block CSS property to the images inside the dock, e.g.:
.rdContent img
{
    display: block;
}

Please let us know if this helps.

Kind regards,
Dobromir
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Hiren
Top achievements
Rank 1
answered on 04 Jan 2011, 06:38 AM
i tried ur solution but it didnt helped and increased the space for dock, when i tried to drag the dock it shows extra transparent white color for the raddock in right side. I havent placed any image for "middle" check the CSS which i used in my code, and the content and controls is fixed in my div.
.profileBlue .middle
        {
            width: 106px;
            background-color: #cde6ec;
            height: auto;
            padding: 0 10px 0 10px;
            word-wrap: break-word;
            color: #323232;
            line-height: 20px;
        }
        .profileBlue .middle h2
        {
            width: 106px;
            font-size: 18px;
            color: #2a8199;
            word-wrap: break-word;
            line-height: 18px;
            margin-top: 3px;
        }
        .profileBlue .middle span
        {
            height: 42px;
        }

for time being i used to this css to cover the extra space
.RadDock .rdLeft, .RadDock .rdRight, .RadDock .rdBottom, .RadDock .rdTop
        {
            display: none !important;
        }
        .RadDock .rdContent
        {
            padding: 0 7px 0 7px;
            width: 135px;
        }
        .RadDockZone
        {
            width: 135px;
            overflow: hidden;
            border-top: none !important;
            border-right: none !important;
            border-bottom: none !important;
            border-left: none !important;
        }

check the image for the extra space in raddock content after padding, even i tried to reduce the width of the dock and zone but its showing scrollbars.
0
Dobromir
Telerik team
answered on 06 Jan 2011, 12:36 PM
Hi Giri,

I am not quite sure why the solution provided in my previous answer did not work on your side. Could you please open a support ticket and provide a sample project demonstrating the problem so we can examine it locally and provide more-to-the-point answer?

All the best,
Dobromir
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
Dock
Asked by
Hiren
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Hiren
Top achievements
Rank 1
Share this question
or