Creating Dashboard with merged column

[HMPSOLBB]

Hi,

 

anyone got a nice idea to create a dashboard page like shown in the attached screenshot. The problem there is that I created a row with 3 columns each of the got a width of 33% after that a row with two columns of 50% and a row with 100%. Each cell got a RadDockZone with a width of 100%.

How can i avoid the miss alignment on the right side. The current code looks like this:

001.<style type="text/css">
002.        .td33
003.        {
004.            width: 33%;
005.            height: 98%;
006.            vertical-align:top;
007.        }
008.        .td100
009.        {
010.            width: 100%;
011.            height: 98%;
012.            vertical-align:top;
013.        }
014.        .td50
015.        {
016.            width: 50%;
017.            height: 98%;
018.            vertical-align:top;
019.        }
020.        div#main
021.        {
022.            position: relative;
023.            height: 800px;
024.            width: 100%;
025.            background-color: #ccc;
026.            overflow-y: auto;
027.            border: 1px solid red;
028.        }
029.    </style>
030.        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
031.            <div id="main">
032.                <table style="table-layout: fixed; width: 100%;">
033.                    <tr>
034.                        <td class="td33">
035.                            <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="96%" MinHeight="50px"
036.                                Height="95%">
037.                                <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">
038.                                    <ContentTemplate>
039.                                        <br />
040.                                        CONTENT
041.                                        <br />
042.                                    </ContentTemplate>
043.                                </telerik:RadDock>
044.                            </telerik:RadDockZone>
045.                        </td>
046.                        <td class="td33">
047.                            <telerik:RadDockZone ID="RadDockZone2" runat="server" Width="96%" MinHeight="50px"
048.                                Height="95%">
049.                                <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title">
050.                                    <ContentTemplate>
051.                                        <br />
052.                                        CONTENT
053.                                        <br />
054.                                    </ContentTemplate>
055.                                </telerik:RadDock>
056.                            </telerik:RadDockZone>
057.                        </td>
058.                        <td class="td33">
059.                            <telerik:RadDockZone ID="RadDockZone3" runat="server" Width="96%" MinHeight="50px"
060.                                Height="95%">
061.                                <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title">
062.                                    <ContentTemplate>
063.                                        <br />
064.                                        CONTENT
065.                                        <br />
066.                                    </ContentTemplate>
067.                                </telerik:RadDock>
068.                            </telerik:RadDockZone>
069.                        </td>
070.                    </tr>
071.                </table>
072.
073.                <table style="table-layout: fixed; width: 100%;">
074.                    <tr>
075.                        <td class="td50">
076.                            <telerik:RadDockZone ID="RadDockZone5" runat="server" Width="96%" MinHeight="50px"
077.                                Height="95%">
078.                                <telerik:RadDock ID="RadDock5" runat="server" Width="300px" Title="RadDock-Title">
079.                                    <ContentTemplate>
080.                                        <br />
081.                                        CONTENT
082.                                        <br />
083.                                    </ContentTemplate>
084.                                </telerik:RadDock>
085.                            </telerik:RadDockZone>
086.                        </td>
087.                        <td class="td50">
088.                            <telerik:RadDockZone ID="RadDockZone6" runat="server" Width="96%" MinHeight="50px"
089.                                Height="95%">
090.                                <telerik:RadDock ID="RadDock6" runat="server" Width="300px" Title="RadDock-Title">
091.                                    <ContentTemplate>
092.                                        <br />
093.                                        CONTENT
094.                                        <br />
095.                                    </ContentTemplate>
096.                                </telerik:RadDock>
097.                            </telerik:RadDockZone>
098.                        </td>
099.                    </tr>
100.                </table>
101.
102.
103.                <table style="table-layout: fixed; width: 100%;">
104.                    <tr>
105.                        <td class="td100">
106.                            <telerik:RadDockZone ID="RadDockZone4" runat="server" Width="96%" MinHeight="50px"
107.                                Height="95%">
108.                                <telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock-Title">
109.                                    <ContentTemplate>
110.                                        <br />
111.                                        CONTENT
112.                                        <br />
113.                                    </ContentTemplate>
114.                                </telerik:RadDock>
115.                            </telerik:RadDockZone>
116.                        </td>
117.                    </tr>
118.                </table>
119.            </div>
120.        </telerik:RadDockLayout>

[Marin Bratanov]

Hello,

Table cells have some spacing between them and so when you set widths in percentage, the number of cells changes the total amount of padding and so - the total width available to content.

One way is to use <div> elements to create the desired layout (e.g., through floats or inline-block display, or through flex rules).

Another is to remove the spacing from the tables.

To help you get started, I modified the rules and markup that were provided to eliminate the spacing coming from the table, and here is the new snippet with comments and highlights on the changes:

<style type="text/css">
    .td33 {
        width: 33%;
        height: 98%;
        vertical-align: top;
    }

    .td100 {
        width: 100%;
        height: 98%;
        vertical-align: top;
    }

    .td50 {
        width: 50%;
        height: 98%;
        vertical-align: top;
    }

    div#main {
        position: relative;
        height: 800px;
        width: 100%;
        background-color: #ccc;
        overflow-y: auto;
        border: 1px solid red;
    }

    /*rules that I added*/
    #main table {
        border-spacing: 0px;
        border-collapse: collapse;
        border: 0;
    }

    #main table td {
        border: 0;
        padding: 0;
        /*the height set to the cells in the rules above requires that all their parent elements have dimensions - either in pixels, or percent
        and this is not the case in this example - neither the rows, nor the table has a height set, so you may want to add such rules, or to
        remove the height from the cells, the browser will stretch them to fit the content anyway
        */
    }

    div.RadDockZone {
        padding: 0;
        border: 0;
        overflow-x: hidden;/*the vertical scrollbar will otherwise spawn a horizontal scrollbar because it will take some of the width available to content*/
    }
</style>
<telerik:RadDockLayout ID="RadDockLayout1" runat="server">
    <div id="main">
        <table style="table-layout: fixed; width: 100%;">
            <tr>
                <td class="td33">
                    <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="100%" MinHeight="50px"
                        Height="95%">
                        <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">
                            <ContentTemplate>
                                <br />
                                CONTENT
                               <br />
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
                <td class="td33">
                    <telerik:RadDockZone ID="RadDockZone2" runat="server" Width="100%" MinHeight="50px"
                        Height="95%">
                        <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title">
                            <ContentTemplate>
                                <br />
                                CONTENT
                               <br />
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
                <td class="td33">
                    <telerik:RadDockZone ID="RadDockZone3" runat="server" Width="100%" MinHeight="50px"
                        Height="95%">
                        <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title">
                            <ContentTemplate>
                                <br />
                                CONTENT
                               <br />
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
            </tr>
        </table>

        <table style="table-layout: fixed; width: 100%;">
            <tr>
                <td class="td50">
                    <telerik:RadDockZone ID="RadDockZone5" runat="server" Width="100%" MinHeight="50px"
                        Height="95%">
                        <telerik:RadDock ID="RadDock5" runat="server" Width="300px" Title="RadDock-Title">
                            <ContentTemplate>
                                <br />
                                CONTENT
                               <br />
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
                <td class="td50">
                    <telerik:RadDockZone ID="RadDockZone6" runat="server" Width="100%" MinHeight="50px"
                        Height="95%">
                        <telerik:RadDock ID="RadDock6" runat="server" Width="300px" Title="RadDock-Title">
                            <ContentTemplate>
                                <br />
                                CONTENT
                               <br />
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
            </tr>
        </table>


        <table style="table-layout: fixed; width: 100%;">
            <tr>
                <td class="td100">
                    <telerik:RadDockZone ID="RadDockZone4" runat="server" Width="100%" MinHeight="50px"
                        Height="95%">
                        <telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock-Title">
                            <ContentTemplate>
                                <br />
                                CONTENT
                               <br />
                            </ContentTemplate>
                        </telerik:RadDock>
                    </telerik:RadDockZone>
                </td>
            </tr>
        </table>
    </div>
</telerik:RadDockLayout>

Regards,
Marin Bratanov
Progress Telerik

[HMPSOLBB]

Perfect!

Thanks, that fixed my problems