How to vertically align content in dockzone

2 posts, 0 answers
  1. Andy
    Andy avatar
    18 posts
    Member since:
    Apr 2011

    Posted 26 Oct 2011 Link to this post

    I have three dockzones in a pageview. The dockzones are contained in three RadPanes.  The RadPanes are positioned side by side horizontally.  The dockzones are set to vertical orientation.  When I have three RadDocks 1 each in the three dockzones all is well. By that I mean all three RadDocks are positioned at the top of the DockZones.. When I add a second RadDock to the DockZone1 the other RadDocks in DockZone2 and DockZone3 reposition themselves vertically towards the middle of their dockzones.

    I am using a JavaScript function to set the heights of the three panes to the max height of the tallest pane in which the three dockzones reside.  This is to ensure that all three RadPanes have the same height.

    I realize that the setting of the heights is probably the problem, but it cures other visual problems. 

    So how do I keep the heights of the three panes and thus the RadDocks equal and align all content vertically to the top when there is an uneven amount of content (in height) in the three docks?

  2. Slav
    Slav avatar
    1351 posts

    Posted 28 Oct 2011 Link to this post

    Hi Andy,

    Please find attached my sample page and compare it with your actual one, as I am not sure if I understand the described scenario correctly. By default all RadPanes in a RadSplitter are equal in height, so it won't be necessary to set their size via JavaScript.

    You can try adding the following CSS code in the head section of your page in order to ensure that the content in the cells of the table, generated by the RadSplitter, is aligned correctly.
    <style type="text/css">
            vertical-align: top !important;

    Note that currently I am mostly guessing as to what your exact setup is and although I am willing to help you, I am unable to do so without a runnable project that matches your scenario. Please open a regular support ticket and try modifying the attached sample so that the issue is reproducible. If this is not an option, you could also prepare and send a sample, runnable project that isolates the problem so that we can inspect it locally and suggest a corresponding solution.

    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. DevCraft R3 2016 release webinar banner
Back to Top