Read and respond to this message at: 
https://sourceforge.net/forum/message.php?msg_id=4913962
By: chikkubhai

.displayTableFrame {
        background-color: white;
        overflow-x: scroll;
        height: 320px;
        width: 100%;
}

.dataTable {
        text-decoration: none;
        border: 1px solid #CCC;
        width: 100%;
}

.dataTable th {
        padding: 1px 2px 1px 2px !important;
        text-align: center;
        border-spacing: 0px;
}

.dataTable td {
        padding: 1px 2px 1px 2px !important;
}

.dataTable thead tr {
        position: relative;
        height: 10px;
        background-color: #D7E5F3;
}

.dataTable tbody {
        height: 230px;
        overflow-x: hidden;
}

.dataTable tbody tr {
        width: inherit;
        height: auto;
        white-space: nowrap;
        height: auto;
}

.dataTable tbody tr.odd {
        background-color: #eee
}

.dataTable tbody tr.tableRowEven,tr.even {
        background-color: #ddd
}

.dataTable tbody tr td:last-child {
        padding-right: 1px;
}

.dataTable tbody td {
        padding: 1px 2px 1px 2px !important;
}

.dataTable .order1 {
        background-position: right 50%;
        background-image: url('../Images/arrow_up.gif');
        background-repeat: no-repeat
}

.dataTable .order2 {
        background-position: right 50%;
        background-image: url('../Images/arrow_down.gif');
        background-repeat: no-repeat
}

Although not sure at all how you guys were able to pass this in Internet 
Explorer.
Here's a little more on non-IE browsers.

The above CSS fixes two issues:
1.) Issue when table goes beyond page width?
I extended the css a little beyond by creating a frame (see displayTableFrame
above) as the table width often goes beyond the page width. This does an ok
job however, there are many issues that the frame does not work in Internet
Explorer at all.
.displayTableFrame {
        background-color: white;
        overflow-x: scroll;
        height: 320px;
        width: 100%;
}
As again I have no clue how we can control the height based on all other data
in a page so that it fits exactly in the single page. I am working on fixing
the CSS to get the height automatically adjusted soon. Currently the height
is based on the actual display table height which is also fixed as you can see
in the .dataTable CSS

2.) The vertical scroll bar appearing on the right hand side of the display
table creates a horizontal scroll bar in the bottom in all browsers.
.dataTable tbody {
        height: 230px;
        overflow-x: hidden;
}
The overflow-x:hidden removes that ugly horizontal scrollbar. The frame in 
itself
gets you a horizontal scrollbar only when the table goes beyond the page width.
All of this was tested in FireFox.

A quick tip add an extra column at the end of all columns to move the vertical
scrollbar a little further to the right as you can see the scrollbar
hiding/overlapping some of the text of the last column.
<display:column title=""> &nbsp; &nbsp;
</display:column>

Having been said this. I am still stuck with getting this working in IE. I need
some good help/input on the frame can also be fixed in Internet Explorer as
well.

Appreciate any suggests/comments to make this work in IE.

-Cheers
Krishna

______________________________________________________________________
You are receiving this email because you elected to monitor this forum.
To stop monitoring this forum, login to SourceForge.net and visit: 
https://sourceforge.net/forum/unmonitor.php?forum_id=249318

-------------------------------------------------------------------------
This SF.net email is sponsored by the 2008 JavaOne(SM) Conference 
Don't miss this year's exciting event. There's still time to save $100. 
Use priority code J8TL2D2. 
http://ad.doubleclick.net/clk;198757673;13503038;p?http://java.sun.com/javaone
_______________________________________________
displaytag-user mailing list
displaytag-user@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/displaytag-user

Reply via email to