Question

Here is my dilemma; I have on my page a table as such:

<table border="1" cellspacing="0" width="100%">
    <tr>
        <td width="40px" valign="top" style="background-color:#5d7b9d" height="5px" >
            <asp:Panel runat="server" ID="pnlLeftTitle" Width="40px" BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Center">
                <asp:Image runat="server" ID="imgLeftControl" BorderStyle="None" ImageUrl="~/Images/Collapse.gif" />
            </asp:Panel>
        </td>
        <td valign="top" title="Navigation" rowspan="2">
            <asp:Panel runat="server" ID="pnlLeftContent" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px">
                <asp:Panel ID="pnlLeftTop" runat="server" Width="100%" HorizontalAlign="Right">
                    <asp:LinkButton ID="btnApplyFilter" runat="server" Font-Size="Smaller" CausesValidation="False">Apply Filter</asp:LinkButton>
                    &nbsp;
                    <asp:LinkButton ID="btnClearFilter" runat="server" Font-Size="Smaller" CausesValidation="False">Clear Filter</asp:LinkButton>
                </asp:Panel>
            </asp:Panel>
        </td>
        <td valign="top" title="Order Listing" rowspan="2">
            <uc1:ucOrderListing runat="server" ID="ucOrderListing1" />
        </td>
    </tr>
    <tr>
        <td width="40px" valign="middle" style="background-color:#5d7b9d">
            <asp:Image runat="server" ID="imgLeft" ImageUrl="~/Images/VertWhiteMenu.gif" ImageAlign="Middle" />
        </td>
    </tr>
</table>

<act:CollapsiblePanelExtender runat="server" ID="cpeLeft" AutoCollapse="false" 
    TargetControlID="pnlLeftContent" ExpandedSize="250" ExpandDirection="Horizontal" CollapsedSize="0" 
    CollapsedText="Menu" ExpandedText="Menu" ExpandControlID="pnlLeftTitle" 
    CollapseControlID="pnlLeftTitle" ImageControlID="imgLeftControl" CollapsedImage="~/Images/Expand.gif" 
    ExpandedImage="~/Images/Collapse.gif" >
</act:CollapsiblePanelExtender>

Also I am dynamically adding panels to pnlLeftContent and setting there width to 100%.

When collapsed, the left (title=”Navigation”) column looks perfect. When expanded, and when my browser is maximized, there is empty space between the pnlLeftContent panel and the usercontrol. Turning on the table borders indicated that the space was in the “Navigation” column between the left hand bounds of the pnlLeftContent and the left hand bounds of the “Navigation” column.

What I want is for the left hand column to fit to contents and the right hand column of my table to take up the remainder of the space. In a windows forms datagridview I would accomplish this by setting the AutoSizeMode of the left column to AllCells and the AutoSizeMode of the right column to Fill.

How do I accomplish the same thing with an html table?
Or is there a better way of handling a horizontal CollapsiblePandelExtender to show side by side with other controls?

Any help would be greatly appreciated.

Answer 1

found the solution thanks to:

How do I make one table column fill all the spare horizontal space?

Long story short, i set the column containing my user control to a width of 99%. It looks messed up in the designer but once all the dynamically added panels are added to pnlLeftContent it works perfect.

thanks Ranata