Removing extra space outside the DIV inside RadDock content

4 posts, 0 answers
  1. Hiren
    Hiren avatar
    62 posts
    Member since:
    Dec 2010

    Posted 31 Dec 2010 Link to this post

    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>
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 03 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hiren
    Hiren avatar
    62 posts
    Member since:
    Dec 2010

    Posted 04 Jan 2011 Link to this post

    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.
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 06 Jan 2011 Link to this post

    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.
Back to Top