JSF - Facet - Header und das Styling

[SaschaLR]

Hallo zusammen,

wie kann ich denn dafür sorgen, dass in meiner dataTable die

<f:facet name="header"><blah /></f:facet>

Sich normal mit CSS formatieren lassen?

Momentan kann ich nur die Schrift aber nicht die Breite und Ausrichtung anpassen. Wenn ich width: 100%; oder width: 130px; angebe, oder text-align: left; werden diese Angaben einfach ignoriert.

Ich möchte aber gerne die Spaltentitel linksbündig haben und die Titelzeile in einer anderen Hintergrundfarbe und zwar durchgänging ... bisher geht das nur auf Textbreite. Und es sieht einfach übel aus.

Danke für eure Antworten!

Viele Grüße,
Sascha

 

[WeirdAl]

Hi,
kannst Du mal ein Beispiel zeigen, wie Du versuchst CSS einzubinden bzw. styles zu ändern? So kann man schlecht was dazu sagen.

Cu
Alex

 

[SaschaLR]

Hallo!

Gerne doch! Hier ein Beispiel:


Auszug style.css

.tableColHeading {
	font: 11px Verdana, sans-serif;
	font-weight: bold;
	text-align: left;
	width: 100%;
	border: 1px solid green;
}

Auszug .jsp

<h:dataTable style="width: 600px" var="case" cellspacing="0" cellpadding="2" binding="#{EditCaseBean.caseTable}" value="#{EditCaseBean.cases}" rowClasses="tableRowa, tableRowb">
			
...

<h:column>
	<f:facet name="header">
		<h:outputText value="Eröffnet am" styleClass="tableColHeading" />
	</f:facet>
	<h:outputText value="#{case.createDate}" />
</h:column>

...

</h:dataTable>

Hilft das weiter?

Der Inhalt der Facette wird zentriert und nur auf Textlänge + Padding ausgedeht (kann man am grünen Rahmen sehen).

Viele Grüße,
Sascha


EDIT: Ich habe grade gesehen, im IE funzt es. Aber im FF nicht!?!?! Verdammt!

 

[WeirdAl]

Hi,
syntaktisch sieht das alles ok aus. Da ich noch wenig mit CSS mache bzw. alles google und "blind" copy & paste kann ich zu den einzelnen CSS Befehlen und evtl Browserproblemen nichts sagen.
Besorg Dir mal Firefox und das Plugin Web Developer. Dort kannst Du Dir deine genutzten CSS-Dateien anzeigen lassen und "live" editieren. Damit ist es möglich leicht Fehler zu finden oder/und die finale CSS anzupassen.

Cu
Alex