JSF PrimeFaces Elemente ausrichten

[Willi2793]

Hallo,

ich habe mal wiedr ein Problem mit PrimeFaces und CSS. Sicher nicht das Letzte. Und zwar habe ich 2 Comboboxen und ein Spinner-Objekt mit den jeweils dazugehörigeb´n Labels. Das Ganze soll waagerecht in einer Linie ausgerichtet werden. Bis jetzt bin ich so weit:

Realisiert habe ich das Ganze hiermit:

[XML] <panelGrid columns="3" style="height: 100px; width: 884px;">
<hanelGroup>
<putputLabel for="selsai" value="Saison:&nbsp;"/>
<p:selectOneMenu id="selsai" effect="fade" style="width: 120px; text-align: left;" value="#{selectBacking.aktSaison}">
<f:selectItems value="#{selectBacking.saisonList}" var="sai"
itemLabel="#{sai.name}"
itemValue="#{sai.id}"/>
</p:selectOneMenu>
</hanelGroup>
<hanelGroup>
<putputLabel for="selrun" value="Runde:&nbsp;"/>
<p:selectOneMenu id="selrun" effect="fade" style="width: 150px; text-align: left;" value="#{selectBacking.aktRunde}">
<f:selectItems value="#{selectBacking.rundeList}" var="run"
itemLabel="#{run.name}"
itemValue="#{run.id}"/>
</p:selectOneMenu>
</hanelGroup>
<hanelGroup>
<putputLabel for="selspt" value="Spieltag:&nbsp;"/>
<p:spinner id="selspt" min="1" max="34" value="#{selectBacking.aktSpieltag}" styleClass="twi-sptaginput">
<p:ajax update="tiptab"/>
</p:spinner>
</hanelGroup>
</panelGrid>[/XML]

In dem CSS twi-sptaginput wird nur die Breite definiert.

Nun sieht man ja das die Labels vor den Comboboxen am unteren Rand ausgerichtet sind, das vor dem Spinner aber an der Mitte. Und der Spinner ist eine Nuance tiefer als die Comboboxen. Nun möchte ich die Label mittig vor den Ojekten haben und alles mittig im übergeordneten Container.

Mich macht das CSS fertig.

 

[freez]

Ich würde mal darauf tippen, dass dir ein [c]vertical-align:middle;[/c] helfen würde. Ich würde es in einer css Klasse definieren, die du dem PanelGrid=>RowClasses zuordnest.

 

[JimPanse]

Versuche es mal mit:

[XML]
<hanelGrid columns="3" rowClasses="top" styleClass="noBorder">
...
</hanelGrid>
<style>
.top {
vertical-align: top;
}
.noBorder {
border:0px;
}
</style>
[/XML]

 

[Templarthelast]

Wenn du das css gefummel nicht haben willst, kannst du für jedes Feld eine weiteres panelgrid mit zwei Spalten anlegen.

 

[Willi2793]

Vielen Dank für die Anregungen. Ich habe das mal probiert und bin mi dem Vorschlag ein weiteres verschachteltes PanelGrid anzulegen auch einen Schritt weiter gekommen. Die Label sind jetzt auf einer Linie. Aber der Spinner ist immer noch eine Nuance tiefer als die Comboboxen. wie bekomme ich das jetzt noch mittig ausgerichtet?