Different data_table header styles

I am trying to use different styles for the column headings in a data_table. Specifically, I want some of the headings to be leftt aligned, some right aligned and some to be centred.
I can do this for the data in the columns by using a list of styles in the "columnClasses" attribute, but the "headerClass" attribute applies to all headers.
The header facets for the column contain a <h:panel_group> as the header is composed of some static text and a couple of buttons.
I have tried using a "styleClass" attribute on the panel_group. This results in a <span> HTML element being generated with the required style class but it does not seem to effect the text alignment.
Any suggestions would be appreciated.
Code is included below.
<%-- GroupList.jsp --%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<f:view>
<html>
<head>
<title>Archive</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<h:form id="groupList">
<h:commandButton id="first"
action="#{GroupListBean.first}"
immediate="false"
value="<<"
type="SUBMIT"/>
<h:commandButton id="previous"
action="#{GroupListBean.previous}"
immediate="false"
value=" < "
type="SUBMIT"/>
<h:commandButton id="next"
action="#{GroupListBean.next}"
immediate="false"
value=" > "
type="SUBMIT"/>
<h:commandButton id="last"
action="#{GroupListBean.last}"
immediate="false"
value=">>"
type="SUBMIT"/>
<h:dataTable id="table"
binding="#{GroupListBean.data}"
     rows="10"
value="#{GroupListBean.fullList}"
var="group"
columnClasses="group-list-column-1, group-list-column-2,
group-list-column-3, group-list-column-4"
footerClass="group-list-footer"
headerClass="group-list-header"
rowClasses="group-list-row-even, group-list-row-odd"
styleClass="group-list-background">
<f:facet name="header">
<h:outputText value="Backup Groups"/>
</f:facet>
<h:column>
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Group Id"/>
<h:commandButton id="sortGroupIdA"
action="#{GroupListBean.sortGroupIdA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortGroupIdD"
action="#{GroupListBean.sortGroupIdD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:outputText value="#{group.groupId}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup styleClass="group-list-header-2">
<h:outputText value="Group Name"/>
<h:commandButton id="sortNameA"
action="#{GroupListBean.sortNameA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortNameD"
action="#{GroupListBean.sortNameD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:outputText value="#{group.name}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup styleClass="group-list-header-3">
<h:outputText value="Creation Date"/>
<h:commandButton id="sortTimestampA"
action="#{GroupListBean.sortTimestampA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortTimestampD"
action="#{GroupListBean.sortTimestampD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:outputText value="#{group.timestamp}">
<f:convertDateTime dateStyle="long"/>
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Restore"/>
<h:commandButton id="sortSelectedA"
action="#{GroupListBean.sortSelectedA}"
immediate="false"
image="images/Up16.gif"
/>
<h:commandButton id="sortSelectedD"
action="#{GroupListBean.sortSelectedD}"
immediate="false"
image="images/Down16.gif"
/>
</h:panelGroup>
</f:facet>
<h:selectBooleanCheckbox value="#{group.selected}"/>
</h:column>
<%--
--%>
</h:dataTable>
</h:form>
</body>
</html>
</f:view>
.group-list-background {
background-color: #ffffff;
border-collapse: collapse;
font-family: sans-serif;
font-size: 12pt;
padding: 10px;
width: 90%;
.group-list-column-1
text-align: center;
width: 15%;
.group-list-column-2
text-align: left;
width: 50%;
.group-list-column-3
text-align: right;
width: 20%;
.group-list-column-4
text-align: center;
width: 15%;
.group-list-footer {
background-color: #A5A5A5;
color: #000000;
font-weight: bold;
text-align: center;
.group-list-header {
background-color: #ffffff;
color: #000000;
text-align: centre;
.group-list-header-2
text-align: left;
.group-list-header-3
text-align: right;
.group-list-row-even {
.group-list-row-odd {
background-color: #dddddd;

I am trying to use different styles for the column
headings in a data_table. Specifically, I want some of
the headings to be leftt aligned, some right aligned
and some to be centred.
I can do this for the data in the columns by using a
list of styles in the "columnClasses" attribute, but
the "headerClass" attribute applies to all headers.I'm having the same problem, but it gets much worse than what you described.
I'm have an arbitrarily deep tree structure I've retrieved from my backing bean, and I want to display it in a data table. Each node has a label and maybe a description, for example.
1. The first problem is how to give the node's label a different style than the other node information. Semantically the <th> element is ideal. The problem, however, is that I can't generate a header for a node's label, because the list of nodes itself is being generated. That is, if I use:
<html:dataTable value="#{tree.nodeList}" var="node">
     <html:column>
     <jsf:facet name="header">
          <html:outputText value="#{node.label}" />
     </jsf:facet>Nothing gets put inside the header, as the node is being iterated. This means I have to resort to a crummy hack of nesting a table inside a table for the children:
<html:dataTable value="#{tree.nodeList}" var="node">
     <html:column>
          <html:dataTable value="#{node.nodeList}" var="childNode">
               <html:column>
                    <jsf:facet name="header">
                         <html:outputText value="#{node.label}" />
                    </jsf:facet>
                    <html:dataTable>
                         <html:column>
                              <jsf:facet name="header">
                                   <html:outputText value="#{childNode.label}" />
                              </jsf:facet>
                         </html:column>
                    </html:dataTable>
               </html:column>
          </html:dataTable>
     </html:column>
</html:dataTable>The hack gets uglier (than the useless outermost table), because if you'll notice, to show a label of a child node as a header, I have to put another nested dummy table in my page.
2. Now that I've managed to generate <th> (with a hack), where do I put other information about the node? If I put it in the enclosing table, it shows up before the node's label (in the <th> of the enclosed table). If I put it in the enclosed table, it will be repeated for each child node enumerated! Therefore, I'm forced to put it in the header facet of the enclosed table.
3. Now that I'm stuck with putting all the parent node information in a child table's headers, how do I show different header styles? (This is the limitation you mentioned.) I may, for instance, want to show the node's label, the node's description, and other important information about the node.
4. I can skip this whole <th> mess (reluctantly, because I want to specify <th> semantics by actually using <th>) by just putting everything in normal <td> elements. But this doesn't result in multiple rows like a <th> would.
5. What if each of my nodes wants to specify its own style? I can put a styleClass attribute on an <html:outputText>, but as was already mentioned, this results in a <span> style---not a style of the entire row!
6. If, miraculously, after hours I'm able to randomly get the right combination that will give me a styled header for each node and a sub-table of child-nodes, how do I do recursion? (Remember, my tree is arbitrarily deep.)
7. I could use the JSTL iteration elements and generate my own table, but I've heard rumors that JSTL and JSF don't play will together. What do I do when I want to generate some JSF action within this JSTL-generated table? Can I really just drop a JSF component inside a JSTL iteration?
JSF's dataTable seems nice in a book example, with a single-depth list of something from a database, with static headers, with alternating color styles. But trying to do something in the real world (few things are more fundamental in computer science than a tree structure) quickly seems to throw up all sorts of walls. Maybe I'm missing something really easy, here---any tricks are appreciated.
Garret

Similar Messages

  • Different accordion header styles

    Does anyone know how to have each header of an accordion have
    different styles?
    In all reality, I just need different colors, but different
    icons would be great too.
    I've seen how to customize the header based on it's
    selection, or how to customer all of the headers, but I want each
    header to have a different style.
    Thanks.

    Does anyone know how to have each header of an accordion have
    different styles?
    In all reality, I just need different colors, but different
    icons would be great too.
    I've seen how to customize the header based on it's
    selection, or how to customer all of the headers, but I want each
    header to have a different style.
    Thanks.

  • ToC won't "see" a modified heading style

    I am in the template "white paper" and created a unique heading style. "Heading 4" shows up in my paragraph styles, and my headings are duly made in "Heading 4." "Heading 4" shows up in the TOC inspector. It is checked on the left and right (it is not dimmed). But when I update the ToC, nothing shows up there. It only works if I use the original heading style.

    Well, nothing like asking a Q to get an insight. Here's a crappy yet functional run-around. I deleted the original "heading" and then took "heading 4" and renamed it "heading". Now the ToC looks weird (every other word is a different color) but I can fix that manually when I am done with the doc't.
    Unless someone has a better answer....

  • RH 9, MS Word, Heading styles messing up my mini TOC

    I must be doing something wrong. :-)
    I have done many Word to RH projects. All the same look and feel. I include a mini TOC at the top of my topics, (which are actually book chapters). Now, however, my mini TOCs have no contents in them, and the reason is that my headings are not called "Heading 1, Heading 2" etc, which is what RH requires for mini TOCs. My heading styles came in as "WD_Heading1, WD_Heading2" etc.
    I do not know why they came in like that. I imported the Word files as I always do. I tried renaming the headings styles, but no go.
    What up wit this? Please advise. Thanks!

    Yes, I was doing something wrong.
    During import of the MSWord doc, I forgot to make sure each Word Document paragraph style was mapped to a RoboHelp Style in the drop-down list. A simple step.
    You know, I don't remember having to do this before. I believe the Robohelp style (Heading 1, Heading 2, etc.) was selected by default. Perhaps because I was using a previous proejct as a template.
    Well I am happy to answer my own question for anyone else who runs into this problem. It is not too gratifying, however, as it feels like scoring a goal on your own goalie.

  • Heading style is suddenly no longer applied in RH8

    My colleague has been using a custom header style with no problems.  The other day, the style is suddenly no longer applied in preview.
    The project and styled text appear as they should on my computer, but not his.
    Coincidentally, an upgrade to Explorer 7 was made prior to the new issue, but not sure why that impacts the preview, and the upgrade doesn't impact the project appearance on my computer.
    Does he need to reinstall Robohelp to fix this issue? 
    Just in case, the style is:
    P.01ProcessHeading {
    font-weight: bold;
    font-style: normal;
    margin-bottom: 12pt;
    margin-left: 0in;
    border-bottom-style: Ridge;
    font-size: 18pt;
    color: #000000;
    border-bottom-width: 2px;
    border-bottom-color: #db281c;
    font-family: Arial;
    The HTML of the styled text is:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="generator" content="Adobe RoboHelp 8" />
    <title>01 Adding Allergens</title>
    <link rel="StyleSheet" href="..\..\default.css" type="text/css" />
    </head>
    <body>
    <?rh-script_start ?><script src="../../ehlpdhtm.js" type="text/javascript"
            language="JavaScript1.2"></script><?rh-script_end ?>
    <p class="01ProcessHeading">Topic Title&#160;&#160;&#160;&#160;&#160;<a
      href="02_Topic_title.htm"><img src="..\..\notepage.png" alt=""
               style="border: none;" width="16"
               height="18" border="0" /></a></p>
    I wondered if charset=utf-8 might be a problem - mentioned on another forum topic, http://forums.adobe.com/message/1937722#1937722

    Hi,
    The name of the style starts with numbers. This is invalid CSS and is causing the problems. The best solution is to rename the style (don't use numbers if you can avoid it) and use a find and replace operation to correct the style in your project. (Make a backup first).
    Search for all class="01ProcessHeading" and replace it with class="MyNewName".
    You can validate your css by using the free W3C CSS validator: http://jigsaw.w3.org/css-validator/
    Greet,
    Willam
    This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

  • Heading style customizations not reflected in HTML Help file

    I wanted to share a solution I found for a problem with heading styles. I am using RoboHelp 9 for Word with Office 2010 and generating an HTMLHelp .chm file. When I migrated from Office 2003 to 2010 and RoboHelp 8 to 9, I customized the RoboHelp.docm template file to change the heading styles to have an orange border line over the header. (I had made the customizations in RH 8 for Word, but couldn't transfer the customization to the new template, so I did it by hand). The border line came out black in the header file in most of my topics in the .chm help file. I found one Word doc had topics with the orange line displayed correctly in the help and discovered that that heading style had Style Type = Linked, so I went to each of my Word docs and changed my Heading 1 style to use that style type and it fixed it for all my heading styles.
    In Word 2010, you can change this from the Home tab, Styles ribbon. Rt-click on the Heading 1 style and choose Modify. In the Modify Style dialog set Style type to Linked (paragraph and character).

    Thanks for sharing!
    Greet,
    Willam

  • DOC should be a normal Word document and we should be able to define the header style

    Hi Team,
    We are facing a issue with the pre assigned headers assigned by Adobe acrobat Pro Xl.
    Our actual requirement is as follows:
    1. As we convert a PDF to DOC there shouldn't be any pre assigned headers (header levels defined).
    2. DOC should be a normal Word document and we should be able to define the header style.
    We have tried working out on the same but nothing is going our way.
    We tried couple of step which are as follows:
    1. Deleting pre assigned TAG's.
    2. Clearing headers with the help of Touch Up Reading Order Tool (TURO).
    Request you to kindly revert on the same.

    1. As we convert a PDF to DOC there shouldn't be any pre assigned headers (header levels defined).
    You cannot control how Acrobat creates the word file.
    2. DOC should be a normal Word document and we should be able to define the header style.
    The word file is a normal Word document file. You may wish it was designed for it to be easiest to edit. Acrobat is making a Word file to most reliably resemble the original pdf file. I have no trouble creating any header style I want. The text in the header frequently consists of text boxes. Acrobat does this to insure accurate representation of the pdf file.

  • Different Page Header

    Hi,
    I am working in AR Invoice Report. The requirement is to print the invoice along with terms and condition, which is the last page. We don't require the logo and company information to appear on the terms and condition page. For this we have used page header in invoice page. But how can I remove the page header in the last page. Or can use a different page header in the last page.
    We tried <?start@last-page:body?><?end body?> and section break before that in the last page. But the problem is when the invoice information overflows, it appears in the terms and condition page. and the header information is lost for that. and a page break before <?start@last-page:body?><?end body?> raises an error.
    Any help will be apprciated.
    Satyajit

    Nice little guide to "different first page", vetsrini. Do you know if this is supported with RTF output? I have no problem getting a different header, when the output is in pdf, but when I try to output in RTF, the first header is repeated on the following pages. Is this not supported for RTF?

  • One project with two different web services styles (JAX-RPC and JAX-WS)

    Hi theres,
    how come the same project doesn't support two different web services styles?
    First time I create a web service proxy using the wizard, the second step is to choose between JAX-RPC and JAX-WS. After that, this step is removed from the wizard and all subsquent web services are assumed to be the same style as the first one.
    Can someone explain me why?
    thanks in advance,
    Manuel Leiria

    Hi,
    yes, I think to remember that there is support for a single style only. If you need another one too then you create a new project.
    Frank

  • Payment Terms(Different at header and Item)

    Hi,
    While creating an order with two line items having different materials, A different payment term is picking for one material at item level which is different from header.
    Where as for other material same payment term is coming at both header and item level.
    Could please let me know where do we maintain entry to pick a payment term which comes at item level.

    Mohan Hi,
    Please also not that SAP Standard set the same payment term at the header and the item level. As mentioned, the payment term default value at the sales order comes from the customer master data.
    Best regards.
    Ido

  • Different Footnote Numbering Styles in One Page

    Hello everyone,
    I searched for a solution to this issue for so long, but in vain.
    I've been working on a document where I have to insert footnotes and assign 2 styles or more to their reference numbers.
    In MS Word, it is easily done. Can it be done in InDesign?
    The following screenshot shows 3 different footnote numbering styles in one single page in MS Word:
    If InDesign does not have the ability to do so, will it do in the future?
    Thank you

    Obviously, my question has completely sunk into oblivion!

  • Font issue - in all my replies, sent and forwarders the font is different size and style.

    font issue - in all my replies, sent and forwarders the font is different size and style. Sometimes it changes while I am typing in mid sentence. I tried to adjust using tools, options, advanced. But nothing seems to stick. How can I make all emails have same font style and size?

    I do not know how up to date this is, but there are menus listed in how the message displays when you compose and open an email. [http://kb.mozillazine.org/Font_settings_in_Thunderbird#Message_display] That may help you set the preferences.

  • Control Breaks in Interactive Report Throw off HTML Header Style

    I created an APEX 4.0.0.11.23 page with an interactive report. Several columns are character strings with embedded spaces. At first, when the columns displayed they were wrapped around to as many lines as there were spaces. so I formatted it with this HTML header style:
    $('td[headers="ADDRESS"]').attr("style","white-space:nowrap");
    This corrected the problem but then the user requested two breaks on Column_A and Column_B. This threw the formatting off so I corrected it with this HTML header style:
    $('td[headers="ADDRESS BREAK_COLUMN_A_COLUMN_B_2"]').attr("style","white-space:nowrap");
    Now the lines wrap for some but not for all rows and there does not seem to be any pattern. So for instance the address for one particular row will look display in the desired format as:
    530 EAST 144TH STREET
    And another almost identical row will display as:
    525 EAST 143RD
    STREET
    I thought there may be binary data in the column so I embedded the following code in the main SELECT query that drives the page”
    Regexp_Replace(ADDRESS, '[^[:print:]]')
    This did not help. How do I implement HTML header styles for interactive reports with multiple control breaks so that the address is formatted properly for every line? Is there a related report or page attribute that needs to be set?
    BTW, the way I discovered the HTML header style for interactive reports with multiple control breaks by following this link which was provided in a related thread:
    Re: Interactive Report Control Break disregards HTML Header style.
    Edited by: Comet on Sep 27, 2012 11:00 AM
    Edited by: Comet on Sep 27, 2012 2:32 PM
    Edited by: Comet on Sep 27, 2012 2:33 PM
    Edited by: Comet on Sep 27, 2012 2:34 PM
    Edited by: Comet on Sep 27, 2012 2:35 PM
    Edited by: Comet on Sep 27, 2012 2:36 PM

    Suggest you reproduce this on apex.oracle.com using the same theme, IR configuration and equivalent data.
    What browser/version are you using?

  • Custom heading-styles using h1 , h2 , etc. tags

    Hi!
    I tried to create custom styles for headings which should then be readable by a screenreader.
    My custom headings could not be read by a screenreader, word however displayed them correctly.
    After I converted one document with custome headings and one with the predefined heading styles to html, I found an explanation. Custom headings are just a new CSS-class with the name of the style. In my example:
    <p class=customhead1>Test1</p>
    <p class=customhead1>Test2</p>
    Using predefined heading styles resulted in:
    <h1>Test1</h1>
    <h1>Test2</h1>
    Is there any way to force word to use the <h1>, <h2>, etc. tags on custome styles?
    Thank you very much and all the best,
    Boris

    I'm afraid yes you will need to apply all the settings again, I can't think of an other way.
    Note that Find and Replace (Ctrl+H) can be used to replace a style with another style (or direct formatting with a style).
    Stefan Blom, Microsoft Word MVP

  • How to bring 3 different Sample CSS style sheets into 3 different areas of DW Layout?

    I added the 3 sample css style sheets I want to use into my site.  Now I am trying to bring a different sample css into different sections of the layout.  Example:
    Sidebar 1: green/yellow
    Sidebar 2: red/yellow
    Middle: blue/yellow
    I seem to only be able to have one for the whole page.  Is this true?
    What I am doing is clicking on the div tag: <div.sidebar#sidebar1>, then "Edit CSS" and then scroll down in the Class window to "attach style sheet" and there at the bottom is a link to the sample css style sheets.  I click on the one I want and it changes the css for the whole page not just the sidebar 1. Is there a way I can get a different css sample style sheet for each sidebar in a 3 column layout, and a different sample css for the middle?
    thank you very much

    You can't bring 3 of the sample CSS style sheets together because there are defined areas like tables and lists and paragraphs that are just being redefined.  Then what happens is the browser picks (usually the last set) the instructions it wants to use to display the content.  The only way around this is to save a copy of the 3 CSS documents and open them at the same time.  Then use one as your master which will be linked to the page and grab colors from the other CSS documents.

Maybe you are looking for