rich:column headerClass

[snax92]

Hi,

in witch headerClass can i put a width value in the rich:column.

i have to use already defined width's

CSS:

.colStyleSmall {
    width: 100px;
}
.colStyleSmallMedium {
    width: 140px;
}
.colStyleMed {
    width: 200px;
}

I tryed it with columnClasses but when i let run this page it doesn't have the correct width, should be longer.

PICTURE:

CODE:

<rich:extendedDataTable id="data_table_log" columnClasses="colStyleSmallMedium,colStyleSmall,colStyleSmallMedium"  value="#{log_Backing.allLogEntries}" var="entry" width="100%" height="320px" sortMode="single" selectionMode="none" rows="10" rowKeyVar="rkvar" reRender="scroll_log"  >
                    <!-- Date -->
                    <rich:column id="col_date" headerClass="extdt-cell-div" label="Date" sortable="true" sortBy="#{entry.logDate}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
                        <f:facet name="header">
                            <h:outputText value="#{lbls.label_logDate}" id="header_logDate" />
                        </f:facet>
                        <h:outputText value="#{entry.logDate}" id="log_date" >
                            <f:convertDateTime pattern="#{lbls.date_pattern}" timeZone="#{log_Backing.timeZone}" />
                        </h:outputText>
                    </rich:column>
                    <!-- Severity -->
                    <rich:column id="col_severity"  headerClass="extdt-cell-div"   label="Severity" filterExpression="#{fn:containsIgnoreCase(entry.severity, log_Backing.filterSeverity)}" breakfor="true">
                        <f:facet name="header">
                            <h:outputText value="#{lbls.label_logSeverity}" id="header_logSeverity" />
                        </f:facet>
                        <f:facet name="filter"> 
                                <h:selectOneMenu value="#{log_Backing.filterSeverity}" id="selectOne_severity" style="width:70">          
                                <f:selectItems value="#{log_Backing.filterSeveritys}" />
                                <a4j:support limitToList="true" event="onchange" reRender="data_table_log,scroll_log"></a4j:support>
                            </h:selectOneMenu>
                        </f:facet>
                        <h:outputText value="#{entry.severity}" id="log_severity" />
                    </rich:column>
                    <!-- Source -->
                    <rich:column id="col_source" headerClass="extdt-cell-div"  label="Source" filterBy="#{entry.source}" filterEvent="onblur">
                        <f:facet name="header">
                            <h:outputText value="#{lbls.label_logSource}" id="header_logSource" />
                        </f:facet>
                        <h:outputText value="#{entry.source}" id="log_source" />
                    </rich:column>
                    <!-- Messages -->
                    <rich:column id="col_messages" headerClass="extdt-cell-div"  label="Messages" sortable="false">
                        <f:facet name="header">
                            <h:outputText value="#{lbls.label_logMessage}" id="header_logMessage" />
                        </f:facet>
                        <h:outputText value="#{entry.message}" id="log_message" />
                    </rich:column>
                    <f:facet name="footer">
                    <rich:datascroller align="center" for="data_table_log" id="scroll_log" />
                </f:facet>
                </rich:extendedDataTable>

thx for your help. =D

greez gowtham

[hollow]

i have done it with css, and redefine the skin (overriding existing one)... but the problem is that in chrome doesn't work, I'm writing a jQuery script só I can manipulate the especific colum (example Date, ID, etc)...

overriding existing cod:

.rich-subtable-header {}

.rich-subtable-headercell {}

you can do something like:

.rich-subtable-header extdt-cell-div {}

** Note: richfaces does a poor HTML/CSS standarization... some renderings are way... and mean way wrong... but you can always use a work arround liek jQuery to target a specific column (not the right way to do it, as you can spend more programing in jQuery that you real should need)

[snax92]

i had a look in firefox with firebug but i don't have .rich-subtable-header or .rich-subtable-headercell ...

can you give me a example ?

i have in each column headerClass="extdt-cell-div" there i wrap the text when it's longer than the column .. when i set there "width:200px" only the cells with the date change the length. but the column-header doesn't change ...

at the moment i use firefox .. but this datatable will run later on IE

[hollow]

well you can write something like this:

CSS (example)

// TD amd TR for the content of the rows and cells, TH for the header in the grid

td.gridID, tr.gridID, th.gridID {width:200px;text-align:center;}

td.gridID, tr.gridID, th.gridID input[type="text"] {width:150px;} // if you have an input and you want to specify the with, you can put some extra stuff

the part for the Data Grid in your page

<

<

<rich:column styleClass=gridID" headerClass="gridID" ...

if you have a print screen with the code generated (html) i can better show you how to do it...

[snax92]

here u can see the HTML code for the header / my first column "date"

thx for your help

[hollow]

try this, it worked for me:

<rich:column id="col_date" headerClass="extdt-cell-div colStyleSmall"

<rich:column id="col_severity"  headerClass="extdt-cell-div colStyleSmallMedium"

[snax92]

thx for help =D it work so lala ..

the data lenth is ok. but the header length is not correct .. o.O

PICTURE:

CODE:

<rich:extendedDataTable id="data_table_log" headerClass="col-header"  columnClasses="colStyleSmallMedium,colStyleSmallMedium,colStyleSmall,colStyleSmallMedium"  value="#{log_Backing.allLogEntries}" var="entry" width="100%" height="320px" sortMode="single" selectionMode="none" rows="10" rowKeyVar="rkvar" reRender="scroll_log"  >
                    <!-- Date -->
                    <rich:column id="col_date" headerClass="extdt-cell-div colStyleSmallMedium" label="Date" sortable="true" sortBy="#{entry.logDate}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon">
                        <f:facet name="header">
                            <h:outputText value="#{lbls.label_logDate}" id="header_logDate" />
                        </f:facet>
                        <h:outputText value="#{entry.logDate}" id="log_date" >
                            <f:convertDateTime pattern="#{lbls.date_pattern}" timeZone="#{log_Backing.timeZone}" />
                        </h:outputText>
                    </rich:column>
                    <!-- Severity -->
                    <rich:column id="col_severity"  headerClass="extdt-cell-div colStyleSmallMedium"   label="Severity" filterExpression="#{fn:containsIgnoreCase(entry.severity, log_Backing.filterSeverity)}" breakfor="true">
                        <f:facet name="header">
                            <h:outputText value="#{lbls.label_logSeverity}" id="header_logSeverity" />
                        </f:facet>
                        <f:facet name="filter"> 
                                <h:selectOneMenu value="#{log_Backing.filterSeverity}" id="selectOne_severity" style="width:70">          
                                <f:selectItems value="#{log_Backing.filterSeveritys}" />
                                <a4j:support limitToList="true" event="onchange" reRender="data_table_log,scroll_log"></a4j:support>
                            </h:selectOneMenu>
                        </f:facet>
                        <h:outputText value="#{entry.severity}" id="log_severity" />
                    </rich:column>
                    <!-- Source -->
                    <rich:column id="col_source" headerClass="extdt-cell-div colStyleSmall"  label="Source" filterBy="#{entry.source}" filterEvent="onblur">
                        <f:facet name="header">
                            <h:outputText value="#{lbls.label_logSource}" id="header_logSource" />
                        </f:facet>
                        <h:outputText value="#{entry.source}" id="log_source" />
                    </rich:column>
                    <!-- Messages -->
                    <rich:column id="col_messages" headerClass="extdt-cell-div colStyleSmallMedium"  label="Messages" sortable="false">
                        <f:facet name="header">
                            <h:outputText value="#{lbls.label_logMessage}" id="header_logMessage" />
                        </f:facet>
                        <h:outputText value="#{entry.message}" id="log_message" />
                    </rich:column>
                    <f:facet name="footer">
                    <rich:datascroller align="center" for="data_table_log" id="scroll_log" />
                </f:facet>
                </rich:extendedDataTable>      

[hollow]

I have seen on your other image that you have this render:

<th class="extdt-menucel extdt-subheadercell rich-extdt-subheadercell col-header extdt-cell-div"

you can find if any of those styles have is overriding the width, and change it.

[snax92]

hmm i don't have any width in those styles. can u give me an example ?

her is the css for this column....

PICTURE:

i saw there exist a

<colgroup id="form_main:form:data_table_log:colgroup:header">

<col width="94">

<col width="94">

<col width="94">

<col width="94">

<col></colgroup>

when i change the width her the column get longer but only the header .. ..

sry for those question but work first time with richfaces ...

thx for help

[hollow]

this should work...

th.gridID .colStyleSmall {}
th.gridMessage .colStyleSmallMedium {}

th.gridDate .colStyleMed {}

//*note no need to put width inside, cause its inheriting from the .colStyleSmall etc. that has already width...
// or you can put width:auto or width:inherit if you would like

for the ID of the greed or a small width
<rich:column id="col_ID" headerClass="extdt-cell-div colStyleSmallMedium gridID" styleClass=gridID"

<rich:column id="col_date" headerClass="extdt-cell-div colStyleSmallMedium gridDate" styleClass="gridDate"