JSF PrimeFaces center content of layoutUnit Center

Willi2793

Aktives Mitglied
hallo,

ich teste gerade mal Primefaces aus und finde das eigentlich ganz okay. Aber im Moment stellt sich mir die Frage wie ich in einem "p:layout" den Inhalt von "p:layoutunit position=center" zentriere.

Grüße,
Willi
 

F.S.WhiTeY

Bekanntes Mitglied
Aus der Dokumentation:
Skinning
Following is the list of structural style classes;
Style Class Applies
.ui-layout Main wrapper container element
.ui-layout-doc Layout container
.ui-layout-unit Each layout unit container
.ui-layout-{position} Position based layout unit
.ui-layout-unit-header Layout unit header
.ui-layout-unit-content Layout unit body
As skinning style classes are global, see the main Skinning section for more information.

Also folgendes CSS:

Code:
.ui-layout-unit-content.myContentClass{

text-align: center !important;

}

Und das benutzen des CSS:
[XML]
<p:layout >

<p:layoutUnit position="center" styleClass="myContentClass">
<h:eek:utputText/>
</p:layoutUnit>

</p:layout>
[/XML]


LG

David
 

F.S.WhiTeY

Bekanntes Mitglied
Dann habe ich vilt. die falsche Klasse genommen:

Code:
.ui-layout-center.myContentClass{

text-align: center !important;

}
 

F.S.WhiTeY

Bekanntes Mitglied
Jaja das liebe Primefaces und CSS xD Machen wir es auf die harte Tour:

[XML]
<p:layout >

<p:layoutUnit position="center" style="text-align: center !important;">
<h:eek:utputText/>
</p:layoutUnit>

</p:layout>

[/XML]

Wenn das nicht hilft, fällt mir nur noch eins ein, aber das is SEHR UNSCHÖN:
[XML]

<p:layout >

<p:layoutUnit position="center" >
<center>
<h:eek:utputText/>
</center>
</p:layoutUnit>

</p:layout>

[/XML]
 

Willi2793

Aktives Mitglied
Okay, das scheint zu helfen. Das erste funktioniert auf den Inhalts-Seiten und das zweite dann auch auf der Login-Seite. Das heißt ich habe jetzt was mit dem ich experimentieren kann.

Danke :toll:
 

F.S.WhiTeY

Bekanntes Mitglied
Immer wieder gerne. Als Tip: Primefaces ist teilweise SEHR CSS resistent und undurchsichtig. Dafür sind die Komponenten einfach nur geil.

Alternative: RichFaces. Genau so mächtig aber das Design ist... naja.... welches Design? :D Dafür sind RichFaces aber nicht so kompliziert wenn man etwas mit CSS "nach bearbeiten" will ;)


LG und viel Spaß/Erfolg

David
 

Willi2793

Aktives Mitglied
Ich bemerke es schon. Mit RF habe ich früher mal was gemacht. Aber damit wurde ich nicht so richtig warm. Deshalb versuche ich gerade mal PF.
 

F.S.WhiTeY

Bekanntes Mitglied
Ich mag PF auch lieber, ist halt teilweise ne fette Fummelei und manchmal muss man etwas "mit der Brechstange" durchsetzen was Layout angeht. Aber die restlichen Vorteile überwiegen. Ich sage nur : AJAX und AJAX-Behavior support. Eifach nur GEIL :D
 

Willi2793

Aktives Mitglied
Da komme ich noch hin :D Ich habe seit längerer Zeit jetzt wieder angefangen was mit JSF zu machen und damals gab es AJAX noch nicht wirklich. :oops:

LG,
Willi
 

F.S.WhiTeY

Bekanntes Mitglied
Kein Ding, du wirst es lieben lernen. Eigentlich macht es von der Programmierung her kaum einen Unterschied aber es gaukelt einem vor dass die App schneller läuft. Das macht dir mehr Spaß, das macht dem User mehr Spaß und es sieht auch noch total geil aus ;)

LG

David
 

Fant

Bekanntes Mitglied
Bei solchen Fällen einfach mal in den generierten Code schauen, wie die style-Klasse heißt, die man anpassen muss. Ich hatte am Anfang auch Probleme mit den Eigenheiten vom PrimeFaces, was die Styles angeht, aber FireBug oder was vergleichbares ist hier einfach ein unverzichtbares Werkzeug, mit dem man solche Probleme in Nullkommnix lösen kann.
 

Willi2793

Aktives Mitglied
Bei solchen Fällen einfach mal in den generierten Code schauen, wie die style-Klasse heißt, die man anpassen muss. Ich hatte am Anfang auch Probleme mit den Eigenheiten vom PrimeFaces, was die Styles angeht, aber FireBug oder was vergleichbares ist hier einfach ein unverzichtbares Werkzeug, mit dem man solche Probleme in Nullkommnix lösen kann.

Danke. Ich habe genau das auch nachgesehen im generierten Code. Ich habe mir da auch einige Klassen rausgesucht die ich mal verändert hatte aber ich hatte keinen Erfolg. Welche ist denn die Richtige?
 

Fant

Bekanntes Mitglied
Da müsste ich selbst suchen. Aus dem Kopf weiß ich dass da nun nicht. Ich hab hier grad nicht die Möglichkeit das zu tun, aber später kann ich spaßeshalber gern mal nachschauen, ob ich was finde ;)
Aber das Problem war doch schon gelöst dachte ich?
Grundsätzlich sollte man sich hier jedoch noch überlegen, dass es schon einen Unterschied macht, was denn zentiert werden soll und wie genau. Renderst du zB in die layout-unit noch ein container-element, so kannst du dieses zwar zentrieren, aber wenn es sowieso die ganze Breite einnimmt, dann sieht man davon natürlich nichts. Was dann vermutlich gewünscht ist, ist dass der Inhalt vom inneren Container zentriert wird.
Das ist vermutlich auch der Grund, warum die Lösung von F.S.WhiTeY bei dir bei einigen Seiten klappt und bei anderen (so scheint es wenigstens) nicht.
Um da genauer drauf einzugehen wär aber ein Minimalbeispiel von einer Seite, wo es denn nicht klappt, schön. Wär dann mit weniger Arbeit für den Helfer verbunden ;)
 

F.S.WhiTeY

Bekanntes Mitglied
da bleibt ja nicht viel.

HTML:
<div class="ui-layout-unit-content ui-widget-content">Right unit content.</div>

Wäre das, was beim showcase rauskommt. Ergo bleiben als CSS-Klassen nur:

ui-layout-unit-content
ui-widget-content

[XML]
<p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">
<h:eek:utputText value="Right unit content." />
</p:layoutUnit>
[/XML]

Womit mein erster Post eigentlich zum erfolg hätte führen sollen. Man kann jetzt lediglich noch
Code:
ui-widget-content
ausprobieren ;)

LG
 

Willi2793

Aktives Mitglied
Zuerst mal die Seiten die die Probleme machen:

template.xhtml
[XML]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title><ui:insert name="title"/> - TWiBu 1.0, © by TWi 2012</title>

<style type="text/css">
.ui-corner-all {
border: 0 solid #000;
}
.ui-widget-header {
text-align: center;
}
.ui-layout-center .twibu-layout-center {
text-align: center !important;
}
</style>

</h:head>
<h:body>
<p:layout fullPage="true">

<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
Header
</p:layoutUnit>

<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>

<p:layoutUnit position="west" size="175" collapsible="false">
Menu
</p:layoutUnit>

<p:layoutUnit position="center" styleClass="twibu-layout-center">
<ui:insert name="content"/>
</p:layoutUnit>

</p:layout>

</h:body>
</f:view>
</html>[/XML]


login.xhtml
[XML]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition template="/template.xhtml">

<ui:define name="title">
<h:eek:utputText value="Login"/>
</ui:define>

<ui:define name="content">
<form method="POST" action="j_security_check">
<p:panelGrid columns="2">
<f:facet name="header">
<h:eek:utputLabel value="Bitte Userid und Passwort eingeben"/>
</f:facet>
<p:eek:utputLabel value="Username:" for="j_username"/>
<p:inputText id="j_username"/>
<p:eek:utputLabel value="Password:" for="j_password"/>
<p:password id="j_password"/>
<f:facet name="footer">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit">
<span class="ui-button-text">Login</span>
</button>
</f:facet>
</p:panelGrid>
</form>
</ui:define>

</ui:composition>
</body>
</html>[/XML]

In dem CSS-Teil in der template.xhtml habe ich folgende Kombinationen versucht:

  • .ui-layout-center .twibu-layout-center
  • .ui-layout-unit-content .twibu-layout-center
  • .ui-widget-content .twibu-layout-center
  • .twibu-layout-center

Aber nie wird der Inhalt des Center-Layouts zentriert.

Fant: Ja, es ist gelöst aber mit <center></center>. Wenn es da eine andere Möglichkeit gäbe faände ich das schon besser.

F.S.WhiTeY: Leider eben nicht.

Grüße,
Willi
 

Ähnliche Java Themen


Oben