Removing extra space outside the DIV inside RadDock content

[Hiren]

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>

[Dobromir]

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

[Hiren]

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.

[Dobromir]

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