Nikita,
You use a styleclass called
„sortable“ but your css definition is “sort_table”.
I implemented it this way
(for IE):
JSP:
<t:div
styleClass="doc-list-div" id="docsdiv"
forceId="true">
<t:dataTable id="doclist"
value="#{MyBean.documents}"
var="doc"
…
CSS:
DIV#docsdiv {
OVERFLOW: auto; WIDTH:100%; HEIGHT: 180px;
}
DIV#docsdiv TABLE {
BORDER-COLLAPSE:collapse;
}
DIV#docsdiv THEAD TH {
FONT-WEIGHT: bold;
POSITION: relative;
Z-INDEX: 20;
TOP: _expression_(document.getElementById("docsdiv").scrollTop-2);
}
From:
Nikita Shah [mailto:[EMAIL PROTECTED]
Sent: Montag, 20. März 2006 12:29
To: MyFaces
Discussion
Subject: RE: Fix the Header of
Datatable
Hello all
I have found a post on the same issue, where this problem is solved..
http://www.mail-archive.com/users%40myfaces.apache.org/msg16386.html
But I am not able to yet solve this issue ...
My whole jsp code and css is as below, can anyone plzz help on this issue ..?
<t:dataTable id="dTable"
styleClass="detailsTable"
rowClasses="detailsTable_Row1,detailsTable_Row2"
var="nodes"
width="100%"
columnClasses="detailsTable_newNodeColumn,detailsTable_newGroupColumn"
value="#{detailsData.nodes}">
<t:column>
<h:outputText value="#{nodes.name}" />
&nbs p; </t:column>
<t:column >
<f:verbatim><DIV class="dv_scrollTable"
style="height:4em;"></f:verbatim>
<h:panelGroup >
<h:dataTable id="taTable" border="1"
styleClass="sortable,dv_scrollTable"
headerClass="groupTable_Header"
rowClasses="groupTable_Row"
columnClasses="groupTable_Column"
var="groups"
value="#{nodes.groups}"
cellpadding="0"
cellspacing="0">
<h:column>
<f:facet name="header">
<h:outputText value="Group" />
</f:facet>
<h:outputText value="#{groups.name} " />
&n
bsp;
<h:outputText value="(#{groups.unit})" rendered="#{groups.unit
!= null}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Target" />
</f:facet>
<h:outputText value="#{groups.target}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Actual" />
</f:facet>
<h:outputText value="#{groups.actual}" />
</h:column>
&nb sp;
</h:dataTable>
</h:panelGroup>
<f:verbatim></DIV></f:verbatim>
</t:column>
</t:dataTable>
and my css is --
.dv_scrollTable
{
width: 250px;
height: 50px;
overflow: auto;
}
/* -----------------------------------------------
Sort Table
----------------------------------------------- */
.sort_table tr td {
width: 100%;
border-color:#B7BDC2 ;
border-style: solid;
border-width: 0ex;
margin
: 0em;
padding-top : 0em;
}
.sort_table_header {
color: #F0F3F4;
text-align : center;
font-family
: arial;
font-size : 1.4ex;
background-color: #8E969D;
text-align: center;
height: 1em;
border-top-color : #B7BDC2;
border-left-color: #B7BDC2;
border-bottom-color : gray;
border-right-color: gray;
border-bottom-style: solid;
border-right-style: solid;
border-top-style: solid;
border-left-style: solid;
}
.sort_table_row {
color
: black;
text-align : center;
font-family
: arial;
font-size : 1.4ex;
background-color : #E6EAEC;
border-color : #B7BDC2;
border-width: 0ex;
}
.sort_table_column {
color
: black;
text-align : center;
font-family
: arial;
font-size : 2ex;
background-color : #E6EAEC;
text-align
: center;
height
: 1em;
border-color : #B7BDC2;
border-width: 0ex;
}
The class sortable is used for column sorting in table . ..?
Where do i apply the overflo auto in such case ... ?
Any type of help will be appreciated..
TIA
~Nikita
Michael Heinen
<[EMAIL PROTECTED]> wrote:
You can easily achieve
this with css.
For IE check these links:
For mozilla you can
define an overflow:auto style and a fixed height for the tbody element.
From:
Nikita Shah [mailto:[EMAIL PROTECTED]
Sent: Freitag, 17. März 2006 13:06
To: [email protected]
Subject: Fix the Header of
Datatable
Hi all
As mentioned in the earlier post of this subject, I want to make the header of
the DataTable fixed.
Below is the jsp code :
<h:dataTable id="taTable" border="1"
styleClass="sortable"
headerClass="groupTable_Header"
rowClasses="groupTable_Row"
&nbs p;
columnClasses="groupTable_Column"
var="groups"
value="#{nodes.groups}"
cellpadding="0"
;
;
cellspacing="0">
<h:column>
<f:facet name="header">
<h:outputText value="Group" />
</f:facet>
<h:outputText value="#{groups.name} " />
</h:column>
<h:column>
<f:facet name="header"&g t;
<h:outputText value="Target" />
</f:facet>
<h:outputText value="#{groups.target}" />
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Actual" />
</f:facet>
<h:outputText value="#{groups.actual}" />
&nbs p;
</h:column>
</h:dataTable>
</h:panelGroup>
<f:verbatim></DIV></f:verbatim>
</t:column>
</t:dataTable>
This table i have placed inside the DIV element with auto overflow.
How do i manipulate so as to prevent the scrolling of headers..?
Are there any possible solutions to this .. ?
Any help would be appreciated.
TIA
~Nikita Shah
Jiyo cricket on Yahoo!
India cricket
Yahoo!
Messenger Mobile Stay in touch with your buddies all the time.
