[Solved] RadDockZone Sizing Issues

[Tim Carmichael]

Hi there,

I have formatted a few RadDockZones within the confines of a table.  I have a table with 3 rows, 1st and 3rd row has 1 cell that spans the page, the middle row has 3 cells, middle cell is 40% in width and the outer 2 are 30% each.

When I load the page I can instantly see that the zones are slightly larger and hanging off of the right hand edge of the table cell.  Any idea how I can resolve this issue as it looks a bit odd at current.

Thanks in advance!

[Tim Carmichael]

A screenshot of the overlapping...

This might help, if you can't envisage what I'm referring to.

[Tim Carmichael]

<telerik:RadDockLayout ID="rdlLayout" Runat="server">
                <table width="100%">
                    <tr>
                        <td colspan="3" valign="top">
                            <telerik:RadDockZone ID="rdzTop"
                                Runat="server"
                                Width="100%"
                                Orientation="Vertical">

                            </telerik:RadDockZone>
                        </td>
                    </tr>
                    <tr>
                        <td width="30%" valign="top">
                            <telerik:RadDockZone ID="rdzLeft"
                                Runat="server"
                                Width="100%"
                                Orientation="Vertical">

                            </telerik:RadDockZone>
                        </td>
                        <td width="40%" valign="top">
                            <telerik:RadDockZone ID="rdzMiddle"
                                Runat="server"
                                Width="100%"
                                Orientation="Vertical">

                            </telerik:RadDockZone>
                        </td>
                        <td width="30%" valign="top">
                            <telerik:RadDockZone ID="rdzRight"
                                Runat="server"
                                Width="100%"
                                Orientation="Vertical">

                            </telerik:RadDockZone>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3" valign="top">
                            <telerik:RadDockZone ID="rdzBottom"
                                Runat="server"
                                Width="100%"
                                Orientation="Vertical">

                            </telerik:RadDockZone>
                        </td>
                    </tr>
                </table>
            </telerik:RadDockLayout>

 

Also above is my tabular code, I've removed the RadDocks as it's the dock zones that are incorrect and overlapping on the right hand edge.

[Boone]

I would just change your outer table to have a cellpadding and cellspacing to 4

<table width="100%" cellpadding="4" cellspacing="4">

That gives the desired results.

[Tim Carmichael]

Hi there Boone,

 

I've tried as you suggest but unfortunately the zones still overlap.  The right hand edge carries on for about 8-10 pixels more than it should do.

 

Nick.

[Tim Carmichael]

I've managed to achieve what I wanted by adjusting the widths of the RadDropZones.  Rather than being 100% of the table cell I have reduced them slightly so that they then become the correct size.  Not the best of fixes of course but it's working.