Solved

Table Height

Posted on 2009-05-09
8
659 Views
Last Modified: 2013-11-26
I have a table with a bunch of controls in it that looks fine on page load, but on any postback the height of the table jumps (taller)

I need the ensure that the table height is LOCKED at 220px
<table id="resTable" style="width: 100%;">

                    <tr>

                        <td class="reservationTextTop" colspan="2">

                            Please Enter Your Booking Dates Below

                        </td>

                    </tr>

                    <tr>

                        <td width="72px" class="reservationText">

                            Property:

                        </td>

                        <td align="left">

                            <telerik:RadComboBox ID="cmbProperty" runat="server" Skin="Office2007" Width="154px"

                                EnableEmbeddedScripts="False" EnableEmbeddedSkins="False" 

                                AutoPostBack="True">

                                <Items>

                                </Items>

                                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

                            </telerik:RadComboBox>

                        </td>

                    </tr>

                    <tr>

                        <td width="72px" class="reservationText">

                            Arrival Date:

                        </td>

                        <td align="left">

                            <table style="width: 100%;" cellpadding="0" cellspacing="0" border="0">

                                <tr>

                                    <td>

                                        <telerik:RadDatePicker ID="firstArr" runat="server" Skin="Gray" Width="100px" AutoPostBack="True"

                                            Culture="English (United States)">

                                            <DateInput AutoPostBack="True">

                                            </DateInput>

                                            <Calendar runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"

                                                Skin="Gray" EnableEmbeddedScripts="False" EnableEmbeddedSkins="False">

                                            </Calendar>

                                            <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>

                                        </telerik:RadDatePicker>

                                    </td>

                                    <td align="center" valign="middle">

                                        <asp:Label ID="lblArrDate" runat="server" CssClass="occ" Width="60px" ></asp:Label>

                                    </td>

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td width="72px" class="reservationText">

                            Depart Date:

                        </td>

                        <td align="left">

                            <table style="width: 100%;" cellpadding="0" cellspacing="0" border="0">

                                <tr>

                                    <td>

                                        <telerik:RadDatePicker ID="firstDep" runat="server" Skin="Gray" Width="100px" 

                                            AutoPostBack="True" Culture="English (United States)">

                                            <DateInput AutoPostBack="True">

                                            </DateInput>

                                            <Calendar runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"

                                                Skin="Gray" EnableEmbeddedScripts="False" EnableEmbeddedSkins="False">

                                            </Calendar>

                                            <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>

                                        </telerik:RadDatePicker>

                                    </td>

                                    <td align="center" valign="middle">

                                        <asp:Label ID="lblDepDate" runat="server" CssClass="occ"  Width="60px"></asp:Label>

                                    </td>

                            </table>

                        </td>

                    </tr>

                    <tr>

                        <td width="72px" class="reservationText">

                            Num Nights:

                        </td>

                        <td class="occ" align="left">

                            <asp:Label ID="lblNights" runat="server" CssClass="occ"></asp:Label>

                        </td>

                    </tr>

                    <tr>

                        <td width="72px" class="reservationText">

                            Occ/Room:

                        </td>

                        <td class="occ" align="left">

                            <asp:DropDownList ID="occA" runat="server" Style="font-size: 10px" TabIndex="4">

                            </asp:DropDownList>

                            Adults

                            <asp:DropDownList ID="occC" runat="server" Style="font-size: 10px" TabIndex="5">

                            </asp:DropDownList>

                            Children

                        </td>

                    </tr>

                    <tr>

                        <td width="72px" class="reservationText">

                            Num Rooms:

                        </td>

                        <td align="left">

                            <asp:DropDownList ID="numRooms" runat="server" Style="font-size: 10px" TabIndex="5">

                            </asp:DropDownList>

                        </td>

                    </tr>

                    <tr>

                        <td colspan="2" align="center" valign="middle">

                            <asp:Button ID="btnRequest" runat="server" Text="Check Availability/Book Now" CssClass="reservationBtn" />

                        </td>

                    </tr>

                    <tr>

                        <td colspan="2" align="center" class="reservationTextBottom">

                            <a href="reservationsAmend.aspx" style="text-decoration: none;" class="reservationTextBottom">

                                Ammend/Cancel reservation</a>

                        </td>

                    </tr>

                </table>

Open in new window

0
Comment
Question by:lrbrister
8 Comments
 
LVL 14

Expert Comment

by:raja_ind82
ID: 24343784
Please see the sample code

Cheers,
M.Raja
        <div width="100">

             <table style="table-layout:fixed;word-wrap: break-word" border=1>

               <tr>

                 <td>Header1</td><td>Header1</td><td>Header1</td><td>Header1</td><td>Header4</td>

                 <td>Header2</td>

                 <td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header3</td><td>Header10</td>

               </tr>

             </table>

           </div>

Open in new window

0
 
LVL 10

Expert Comment

by:Bane83
ID: 24343811
Add a set height to the style of the table:

<table id="resTable" style="width: 100%; height: 220px;">
0
 

Author Comment

by:lrbrister
ID: 24343833
Bane83
I set the height but on postback the height is jumping 26px taller
0
 
LVL 39

Expert Comment

by:abel
ID: 24343858
@raja: you cannot set the width of a <div> using that syntax. Neither fill table-layout:fixed help fix the height of the table, it only influences the way the columns are laid out (and it requires the widths of the columns in the first row to work)

To fix  table height, you cannot do that on the table, because a table will always try to show you all its contents. On any other block-level element, the overflow:hidden (or scroll) and the height together will make it a fixed height. For a table, you can do that by setting the display:block, but that only works on compliant browsers (FF and OP render it correctly, IE7 and IE8 do not).

If you indeed want to fix the visible part of the table to a certain height, what you need is a div around it, which will make it working on either browser (to show the effect I made the lineheight higher):


    <div width="100" style="overflow:hidden;height:220px;">

        <table style="line-height:3em;">

            <tr>

                <td>hello world 1</td>

            </tr>

            <tr>

                <td>hello world 2</td>

            </tr>

            <tr>

                <td>hello world 3</td>

            </tr>

            <tr>

                <td>hello world 4</td>

            </tr>

            <tr>

                <td>hello world 5</td>

            </tr>

            <tr>

                <td>hello world 6</td>

            </tr>

        </table>

    </div>

Open in new window

ScreenShot266.png
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 39

Accepted Solution

by:
abel earned 500 total points
ID: 24343867
as you can see, the table is cut-off in the midst of the "hello world 5". I'm sure that's not your intend, but it illustrates the idea.

Why your layout is different on postback then on first load likely has todo with some other issues than merely fixing the layout with CSS. But for that, we need to see more of your code and/or the running page online. Using CSS to keep the table fixed is a crude method, but it will work.

If you want scrollbars, you can change the overflow:hidden above into overflow:scroll.
0
 
LVL 39

Assisted Solution

by:abel
abel earned 500 total points
ID: 24343884
lol, I see now that I copied the width="100" from the original answer by raja (I always try my assumptions before I post). Ignore that, please. Here's the same code, fixed and changed to allow scrolling (again, just to show you the possibilities, this time with overflow:auto and a fixed width):


<div style="overflow:auto;height:220px;width:150px;">

    <table style="line-height:3em;">

        <tr>

            <td>hello world 1</td>

        </tr>

        <tr>

            <td>hello world 2</td>

        </tr>

        <tr>

            <td>hello world 3</td>

        </tr>

        <tr>

            <td>hello world 4</td>

        </tr>

        <tr>

            <td>hello world 5</td>

        </tr>

        <tr>

            <td>hello world 6</td>

        </tr>

    </table>

</div>

Open in new window

ScreenShot267.png
0
 

Author Closing Comment

by:lrbrister
ID: 31579760
abel,
  You're right.  I CAN fix it but there are other issues going on inside the page.

Using your code and adjusting things here and there I was able to accomplish what I needed.

At some point I'm going to HAVE to resolve the actula problem..without manipulating the table.
0
 
LVL 39

Expert Comment

by:abel
ID: 24344066
you're welcome, glad it helped :)
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

This document covers how to connect to SQL Server and browse its contents.  It is meant for those new to Visual Studio and/or working with Microsoft SQL Server.  It is not a guide to building SQL Server database connections in your code.  This is mo…
For those of you who don't follow the news, or just happen to live under rocks, Microsoft Research released a beta SDK (http://www.microsoft.com/en-us/download/details.aspx?id=27876) for the Xbox 360 Kinect. If you don't know what a Kinect is (http:…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now