JSF keine Ränder bei PanelGrid

[videlius]

Hallo ich arbeite mich gerade in JSF ein und komme nicht weiter.

Ich möchte ein PanelGrid in meinen XHTML-Dateien verwenden.

Implementierung sieht so aus:

<h:panelGrid columns="2" cellpadding="10" border="0">  
        <h:outputText value="Spalte1" />  
        <h:outputText  value="Spalte2" />  
</h:panelGrid>

Es sollen keinerlei Ränder sichtbar sein. Nach ein wenig googeln bin ich auf border="0" gestoßen.
Damit verschwindet zwar der äußere Rand, die Ränder der einzelnen Zellen werden aber nach wie vor gezeichnet. Wie bekomme ich die denn weg?

 

[anti-nerd]

hmn, das verstehe ich nicht, wenn ich das auführe, sehe ich keine Ränder, selbst ohne explizite Nennung von "border"...

Womit arbeitest du überhaupt?
Hast du vllt irgendwelches CSS eingebunden?

 

[Fant]

border ist wirklich nur für den äußeren Rand. Um alle Linien im inneren wegzubekommen benutze zusätzlich rules="none"

Gruß Fant

 

[videlius]

hmn, das verstehe ich nicht, wenn ich das auführe, sehe ich keine Ränder, selbst ohne explizite Nennung von "border"...

Womit arbeitest du überhaupt?
Hast du vllt irgendwelches CSS eingebunden?

Ich verstehe die Farge nicht so ganz. Ich verwende JSF 2.0

Hier ist der Header der Hauptseite:

<h:head>
	<title>#{windowTitle} | Address Book</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style type="text/css" media="all">
body { /* background-color: #2b3a3c;*/
	color: #2d2e2e;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	line-height: 1.2em;
	margin: 0 0 0 0;
	/* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
	padding: 0 0 0 0;
	/* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
	/*text-align: center;
	/* Centers the page content container in IE 5 browsers. */
}

.header {
	height: 40px;
	font-weight: bold;
	font-size: 18px;
	line-height: 40px;
	text-shadow: background;
	text-indent: .2em;
}

.ui-widget,.ui-widget .ui-widget {
	font-size: 12px !important;
}
</style>
</h:head>

es wird schon CSS mit eingebunden.
Ich bekomme die Umrandung der Zellen auch entfernt wenn ich den folgenden Code in den Header mit einbinde.

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}

Allerdings werden dann die Umrandungen aller PanelGrids entfernt, da es global definiert ist. Ich möcht sie aber nur für ein bestimmtes PanelGrid entfernt haben. Dieses liegt in einer anderen XHTML-Datei.

rules="none" hatte überhaupt keinen Effekt. Ich könnte mir vorstellen, dass die Anweisung von einer anderen gegensetzlichen Anweisung überschrieben wird.

 

[anti-nerd]

Ich verstehe die Farge nicht so ganz. Ich verwende JSF 2.0

Tut mir Leid, die Frage ist etwas ungenau. Meistens ist es hilfreich, wenn man die technischen Details kennt, ich sage mit Absicht "man". ich bin da mit sicherheit nicht besonders bewandert, aber da bin ich hier eher die ausnahme und viele Leute können mit Informationen über die Version von JSF (hast du ja schon gesagt), die Implementation, den Server, in dem der Kram ausgeführt wird und andere Details, die evtl für dein Projekt wichtig sind eine Menge Rückschlüsse auf dein Problem ziehen.


Du sagst, du würdest gerne unterscheiden zwischen Rand und kein Rand. Bau dafür doch einfach zwei CSS-Klassen (am besten in einer externen Datei).

Du kannst dann mit dem attribut styleClass das aussehen festlegen.

Ich bin jetzt leider kein css-experte, es gibt Prioritäten bei der Auswertung von Zuordnungen, die du überall nachlesen kannst. Vielleicht reicht es nicht nur Klassen zu definieren.

Du kannst CSS-Dateien auch sehr komfortabel mit <hutputStylesheet library="foo" name="bar" /> einbinden, wobei sich das Tag im head befindet und der ordner "foo" unterhalb von /WEB-INF/resources angesiedelt sein muss.

Das hält deine Seiten frei von css-code

Vielleicht wusstest du das auch schon...
Andererseits lesen das Ding ja noch ein, zwei andere Leute dies eben jetzt wissen.

 

[videlius]

Also ich hab es für mich jetzt gelöst. Ich weiß nicht ob die Lösung besonders gut ist, sie ist aber der einzige Weg der bei mir funktioniert.

Wie ich bereits sagte erhalte ich mit dem CSS-Eintrag

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}

tatsächlich das gewünschte Verhalten. Alle Ränder des PanelGrids verschwinden. Mein Problem war aber der globale Charakter. Die Regel hat sich eben gleich mal auf alle PanelGrids ausgewirkt.
Um das zu verhindern, hab ich den Eintrag umbenannt,

.panelGrid_noBorders tr,
.panelGrid_noBorders td {
border:0 !important;
}

und ihm eine eigene css-Datei spendiert (dort kann ich dann evt. noch andere spezielle Anpassungen hinterlegen) und die Datei im header mit eingebunden.

<h:head>
   <link href="./css/custom-styles.css" rel="stylesheet" type="text/css" />
</h:head>

Um jetzt die Ränder tatsächlich zu entfernen, wird in dem Tag des betreffenden PanelGrid, das styleClass Attribut auf "panelGrid_noBorders" gesetzt.

    <h:panelGrid columns="2" cellpadding="10" styleClass="panelGrid_noBorders"  >  
    ...

fertig! Bei mir klappt es so. :toll:

Danke nochmal an anti-nerd und Fant!