Home.... | log in.... | Pub my question! | Sign-up....

Java-index >> Enterprise & Remote Computing >> Web Tier APIs

Scroll panel

I tried to find a way to have a panel such as <odc:tabbedPanel > which can set the panel height , then the dataTable inside can be scrolled if it is a long one. panelGrid is good but I can't set the height for it.....Does someone know which I can use?Thanks in advance

[298 byte] By [zcona] at [2007-11-26 12:37:41]

«« Has anyone verified jdk1.3.1_19 does not actually have the new DST rule?
»» Targettable paste system to work with non-java windows

# 1

I tried use this, and the scroll bar showing on top of the table instead inside the table. Anyone can help me on it? Thanks !

<h:dataTable>

-- data rows

</h:dataTable>

</div>

zcona at 2007-7-7 16:05:30 >

top of Java-index,Enterprise & Remote Computing,Web Tier APIs...

# 2

.Message was edited by: AndreK

AndreKa at 2007-7-7 16:05:30 >

# 3

According to the W3C HTML spec putting a fixed height and overflow:auto in the CSS of the tbody should do the trick. But one certain widely used browser despitely doesn't understand it. And the alternative browsers don't align out the thead headers correctly to the tbody columns.

There are lots of tricks described in the web, check Google: [url=http://www.google.nl/search?q=scrolling+table+with+fixed+header]scrolling table with fixed header[/url].

The BigFourVersion solution (the 1st Google hit) is one of the best solutions available. But I dislike to have the column widths hardcoded in the CSS. So I created a solution using JS + DOM. You only have to fix the heights, but this shouldn't be a big issue.

Here is a basic example:

CSS/* Basic scroll table. */

span.scrolltable {

display: block;

float: left;

overflow: auto;

overflow-x: hidden;

height: 200px;

}

span.scrolltable table {

margin-right: 16px;

}

span.scrolltable thead tr {

position: relative;

}

/* For other browsers than IE */

html>body span.scrolltable {

overflow: hidden;

}

html>body span.scrolltable thead, html>body span.scrolltable thead tr {

display: block;

}

html>body span.scrolltable tbody {

display: block;

overflow: auto;

height: 180px; /* should be span.scrolltable.height - 20px */

}

/* The looks, not necessary, only setting th.background-color is important for IE */

table.datatable {

border-collapse: collapse;

font-family: verdana, helvetica, arial, sans-serif;

font-size: 11px;

color: #000;

}

table.datatable th {

padding: 2px;

border-left: 1px solid #fff;

color: #fff;

background-color: #c55;

text-align: center;

vertical-align: top;

font-size: 9px;

}

table.datatable td {

padding: 2px;

border: 1px solid #fff;

color: #000;

}

table.datatable tr.rowOdd {

background-color: #eee;

}

table.datatable tr.rowEven {

background-color: #ddd;

}

JSF<h:panelGroup styleClass="scrolltable">

<h:dataTable styleClass="datatable" value="#{myBean.list}" var="item" rowClasses="rowOdd, rowEven">

...

</h:dataTable>

</h:panelGroup>

JavaScript to fix the column widths (put it in f:verbatim tags at the bottom of the JSF page, right before the ending </body> tag)<script>

var spans = document.getElementsByTagName('span');

for (var i = 0; i < spans.length; i++) {

if (spans[i].className == 'scrolltable') {

var table = spans[i].getElementsByTagName('table')[0];

var headers = table.getElementsByTagName('th');

var tbody = table.getElementsByTagName('tbody')[0];

var firstcols = tbody.getElementsByTagName('tr')[0].getElementsByTagName('td');

for (var j = 0; j < headers.length; j++) {

if (firstcols[j].clientWidth > headers[j].clientWidth) {

headers[j].width = firstcols[j].clientWidth - 3;

} else {

firstcols[j].width = headers[j].clientWidth - 4;

}

</script>

BalusCa at 2007-7-7 16:05:30 >

# 4

Hi,

Did anybody get this code to work I will really appreciated any help that I can get I have a Portal application that we used few data tables and the header scrolling with the rest of the data is cousing a problem. If anybody have a sample of the code and is to much to include here my email is tonic90302@adelphia.net

Thanks

chicoa at 2007-7-7 16:05:30 >

# 5

Which problems are you occurring?

BalusCa at 2007-7-7 16:05:30 >

# 6

Hi,

Thanks for the fast answer. Below is my code I put the css stuff in the stylesheets. The erro I get is in the javascript line firstcols[j].width = headers[j].clientWidth - 4;

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<%@taglib uri="http://java.sun.com/portlet" prefix="portlet"%>

<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>

<%@page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1" session="false"%>

<portlet:defineObjects />

<LINK rel="stylesheet" type="text/css"

href='<%= renderResponse.encodeURL(renderRequest.getContextPath() + "/theme/stylesheet.css") %>'

title="Style">

<f:view>

<%-- jsf:pagecode language="java" location="/JavaSource/pagecode/UserExperienceView.java" --%><%-- /jsf:pagecode --%>

<hx:scriptCollector id="scriptCollector1">

<h:form styleClass="form" id="form1">

<h:panelGroup styleClass="scrolltable">

<h:dataTable id="itemTable_11" headerClass="dataTable"

value="#{pc_myBean.dataList}" var="item" width="100%"

rowClasses="row-even1,row-odd1" columnClasses="ListLeft" rows="50">

<h:column id="bline">

<f:facet name="header">

<h:outputText id="hdr_p" value="ID" styleClass="tblHeader" style="width: 100px; valign: top"></h:outputText>

</f:facet>

<h:outputText id="itm_assig_1" value="#{item.id}" style="width: 100px; valign: top">

</h:outputText>

</h:column>

<h:column id="bline1">

<f:facet name="header">

<h:outputText id="hdr_p1" value="Name" styleClass="tblHeader" style="width: 300px;"></h:outputText>

</f:facet>

<h:outputText id="itm_assig_2" value="#{item.name}" style="width: 300px; valign: top;" ></h:outputText>

</h:column>

<h:column id="bline2">

<f:facet name="header">

<h:outputText id="hdr_p2" value="City" styleClass="tblHeader" style="width: 100px;"></h:outputText>

</f:facet>

<h:outputText id="itm_assig_3" value="#{item.city}" style="width: 100px; valign: top;" ></h:outputText>

</h:column>

</h:dataTable>

</h:panelGroup>

<f:verbatim>

var spans = document.getElementsByTagName('span');

alert("span legth: " + spans.length);

for (var i = 0; i < spans.length; i++)

{

alert("span className: " + spans.className);

if (spans.className == 'scrolltable')

{

var table = spans.getElementsByTagName('table')[0];

var headers = table.getElementsByTagName('th');

var tbody = table.getElementsByTagName('tbody')[0];

var firstcols = tbody.getElementsByTagName('tr')[0].getElementsByTagName('td');

alert("Header Len: " + headers.length);

for (var j = 0; j < headers.length; j++)

{

alert("col: " + firstcols[j].clientWidth);

alert("hdr: " + headers[j].clientWidth);

if (firstcols[j].clientWidth > headers[j].clientWidth)

{

headers[j].width = firstcols[j].clientWidth - 3;

}

else

{

firstcols[j].width = headers[j].clientWidth - 4;

}

</script>

</f:verbatim>

</h:form>

</hx:scriptCollector>

</f:view>

chicoa at 2007-7-7 16:05:30 >

# 7

Hi,Sorry I forget to incude the error messageLine: 762Invalid argumentline 762 is:firstcols[j].width = headers[j].clientWidth - 4;thanks again.

chicoa at 2007-7-7 16:05:30 >

# 8

Your JS is wrong. if (spans.className == 'scrolltable') {

BalusCa at 2007-7-7 16:05:30 >

# 9

Hi,The code that I show you is wrong I have that line in my jsp is: if (spans.className == 'scrolltable') {and that is when I get the errorthanks

chicoa at 2007-7-7 16:05:30 >

# 10

Hi,The code that I show you is wrong I have that line in my jsp is sorry it keeps dropingthe index.if (spans[ 1 ].className == 'scrolltable') {and that is when I get the errorthanks

chicoa at 2007-7-7 16:05:30 >

Java programming resources: FAQs, tutorials, compiler and browser download sites, documentation, books lists, IDEs, etc.

Scroll panel

Enterprise & Remote Computing New Topic

Enterprise & Remote Computing Hot Topic

Enterprise & Remote Computing

All Classified