In ASP.NET, TabContainer does not resize automatically

Question

I have an Ajax tabcontainer with a gridview in one of the tabs. When the gridview increase, the tab container does not, and the gridview is truncated.

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="100%">
    <cc1:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"  >
        <HeaderTemplate>
            <div style="float: left;">
                <img src="images/accept.png" />
            </div>
            <div style="float: right; padding-left: 5px;">Accept
            </div>
        </HeaderTemplate>
        <ContentTemplate>
        -- rest of the markup here
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>

What am I missing?

Tried using fixed units but I don't know the size of the grid at runtime

Answer 1

Well, what is the size of your GridView?

As a general rule, it best to give the GridView a CSS class of "table" (from bootstrap), and thus the GridView automatic expands to the given div size it has to work with.

So, in most cases, the tab control width is set, and THEN the content inside expands to that size (not the other way around as you ask).

So, say this markup:

    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">
        <ajaxToolkit:TabPanel runat="server"
            HeaderText="Tab 1" ID="TabPanel1" Width="100%">
            <ContentTemplate>
                <h4>Content area - hotel grid</h4>
                <asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False"
                    DataKeyNames="ID" CssClass="table table-hover"
                    Width="100%" >
                    <Columns>
                        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                        <asp:BoundField DataField="LastName" HeaderText="LastName" />
                        <asp:BoundField DataField="City" HeaderText="City" />
                        <asp:BoundField DataField="HotelName" HeaderText="Hotel" />
                        <asp:BoundField DataField="Description" HeaderText="Descriptioin" />
                        <asp:TemplateField HeaderText="Edit"
                            ItemStyle-HorizontalAlign="Center" ItemStyle-Width="130px">
                            <ItemTemplate>
                                <asp:Button ID="cmdEdit" runat="server" Text="Select"
                                    OnClick="cmdEdit_Click" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

            </ContentTemplate>
        </ajaxToolkit:TabPanel>

        <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab 2">
            <ContentTemplate>
                <div style="border: solid; border-color: red;">

                    <h4>Stuff inside of tab 2</h4>
                </div>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>

And note how the 2nd tab with the red border div looks like this:

Again, note how the red "div" expanded to the size of the tab, not the other way around.

So, as long as you "size" the tab control, then a div or even a GridView should expand to the given size of that tab control.

As noted, test a grid view outside on a separate page. Get the CssClass="table" working, as that will always automatic expand the GridView to the size of its container.