# PrimeFaces datatable zentrieren



## Willi2793 (2. Sep 2012)

Hallo,

ich habe ein p:layout und möchte den Inhalt von der Position "center" zentrieren. Dazu habe ich folgendes angegeben:

[XML]<p:layoutUnit position="center" style="text-align: center !important">[/XML]

Das funktioniert soweit auch. Text und Images werden zentriert. Aber eine dataTable wird linksbündig in das Layout eingefügt. Wie schaffe ich es auch die dataTable zu zentrieren?


----------



## F.S.WhiTeY (2. Sep 2012)

Moin, 

Wenn man etwas zentrieren will muss man lediglich folgendes machen:


```
style = "margin-left:auto; margin-right:auto;"
```

Dabei ist es wichtig das das Elternelement 
	
	
	
	





```
margin:0;
```
 und 
	
	
	
	





```
padding:0;
```
 hat, sonst läuft das meistens nicht. Das könnte sich mit den 
	
	
	
	





```
position="center"
```
 in die quere kommen aber man kann es probieren.

Facelets und Primefaces dataTable haben keinen position-tag, somit bleibt nur eine styleClass ( also CSS ) oder direktes CSS.

LG


----------



## Willi2793 (2. Sep 2012)

Hm, das klappt leider nicht. Ich habe es bei der dataTable angegeben und voher per div margin und pattern auf 0 gesetzt. Aber leider klappt das nicht.


----------



## F.S.WhiTeY (2. Sep 2012)

Du musst ja auch margin und padding bei der layoutuint setzen


----------



## Willi2793 (2. Sep 2012)

Hm, danke. Ich finde das Ganze CSS-Geraffel um einiges komplizierter als JSF selber. Soll heissen: noch habe ich es nicht geschafft


----------



## F.S.WhiTeY (2. Sep 2012)

Moin,

An deiner Stelle würde ich diesen ganzen LayoutUnit-Mist vergessen und erstmal mit dem Design anfangen und das mit HTML und CSS. Dann kannst du auf die Funktion gehen. Kannst es auch anderes herum machen, kümmere dich nicht um das Design und geh erstmal auf die Funktion. 

Wenn du CSS und HTML lernen willst, mach eine Webseite und zwar vom Layout bis zum HTML. Mach doch mal ein Standarddesign welches du für dein aktuelles Project nutzen willst. Wenn das mit reinem HTML und CSS läuft, wird es das auch mit JSF. Ein weiterer vorteil ist, dass du dann gleich ein Template daraus basteln kannst und deine JSF-Seiten sauberer und übersichtlicher sind. 

Wenn du damit eigentlich nichts zu tun haben willst, lass es ganz weg und überlass diese Dinge einem Medieninformatiker / Webdesigner.

Kurzum: Das Geraffel wird dich auch weiterhin wahnsinnig machen wenn du dich nicht expliziet nur damit mindestens drei bis vier Monate auseinander setzt. Dann hast du wenigstens die Basics. 

Ich will dich hier nicht nieder machen aber ich mag dir klar machen, dass das als J2EE-Entwickler nicht deine Aufgabe ist. Du kannst es aber zu deiner machen, das erfordert aber Einarbeitung in ein komplexes Thema und das nennt sich Webdesign.

So meine Meinung zu Design und Programmierung kennst du nun, damit ich hier aber nicht nur "trolle" eine zwar etwas unschöne aber wahrscheinlich funktionierende Lösung für dein aktuelles Design-Problem:


```
<h:dataTable style="position:relative; left:100px; !important" ...... />
```

Zur erklärung:

position: relative --> eine relative position ist ein verschieben ausgehend von der eigentlich normalen position innerhalb des Elternelements. Man kann das Element allerdings auch über den "Rand" des Elternelementes hinausschieben.

left: 100px; --> +100px von links also 100px NACH RECHTS verschoben.

Mit der Pixelanzahl solange spielen bis es mittig ist ( Breite-Elternelement minus Breite-Datatable geteilt durch zwei ) oder zumindest mittig aussieht ( Breite Dynamisch ).


----------



## Willi2793 (3. Sep 2012)

F.S.WhiTeY hat gesagt.:


> Moin,
> 
> An deiner Stelle würde ich diesen ganzen LayoutUnit-Mist vergessen und erstmal mit dem Design anfangen und das mit HTML und CSS. Dann kannst du auf die Funktion gehen. Kannst es auch anderes herum machen, kümmere dich nicht um das Design und geh erstmal auf die Funktion.
> 
> ...



Das ist mir schon alles klar. HTML ist auch nicht mehr ganz das Problem. Aber CSS in den Details und vor allem das Zusammenspielen der Klassen ist mir noch nicht ganz klar. Einen Webdesigner möchte ich eher nicht anheuern da das ganze ein privates Projekt ist 



F.S.WhiTeY hat gesagt.:


> Ich will dich hier nicht nieder machen aber ich mag dir klar machen, dass das als J2EE-Entwickler nicht deine Aufgabe ist. Du kannst es aber zu deiner machen, das erfordert aber Einarbeitung in ein komplexes Thema und das nennt sich Webdesign.



Keine Angst. Das fand ich konstruktiv und daher fühle ich mich weder nieder gemacht noch angegriffen.



F.S.WhiTeY hat gesagt.:


> ```
> <h:dataTable style="position:relative; left:100px; !important" ...... />
> ```
> 
> ...



Danke für den Vorschlag. Aber das ist ja nicht wirklich zentriert sondern nur vom Rand verschoben. Der Unterschied ist der, das bei einer anderen Bildschirmauflösung diese Art der Zentrierung schon nicht mehr greift. Oder?


----------



## F.S.WhiTeY (3. Sep 2012)

> Der Unterschied ist der, das bei einer anderen Bildschirmauflösung diese Art der Zentrierung schon nicht mehr greift. Oder?



Hmm Ja und Nein. Wenn dein Elternelement eine Fixe Breite hat, greift es bei jeder Auflösung. Wenn dein Design dynamisch ist und sich der Auflösung anpasst ( Damit meine ich die Elemente die den Content halten, nicht den Rand ) dann greift es nicht mehr, das ist richtig. ABER wir können ja auch in die Trickkiste greifen ;D

Der Trick ist, das du der DataTable sowohl ein prozentuales Verschieben als auch eine Prozentuale breite geben kannst. Allerdings funktioniert dieser Trick auch nur bedingt. Ab einer Auflösung über 1300px wird das kritisch werden da sich die Tabelle dan sehr dolle streken wird. Das sieht dann auch nicht mehr estetisch aus. 

Aber wie gesagt: Wenn das Elternelement eine fixe Breite hat ist das alles kein Problem. Das ist halt der feine unterschied zwischen statischen und dynamischen Layouts. Statische sind zu anfang meist einfacher. Ich ziehe statische Layouts auch aus estetischen Gründen vor aber das ist Geschmackssache. 

LG


----------



## Willi2793 (5. Sep 2012)

Sorry das es etwas dauert bis ich antworte. Ich habe aus anderen Gründen nicht wirklich den Kopf frei für das Projekt.

Aber ich möchte hier ja sowas wie eine Mischung aus dynamischen und festem Layout. Bleiben wir mal bei Layout und den Units, West, Center und East. West und East haben eine feste Breite und Center den Rest des Bildschirms. Die darin enthaltene dataTable hat eine feste Breite soll dann aber in dem Center zentriert werden.


----------



## F.S.WhiTeY (5. Sep 2012)

Moin,

ich kann mir das derzeit einfach schlecht vorstellen, poste doch bitte mal dein Layout also die HTML-Geschichte damit ich das nachbauen kann. Dann kann ich mir nen kopf über das CSS machen und testen. Dazu brauche ich ja die Beans nicht, kann mir ja nen dummyproject erstellen. 

Wenn ich das sehe ist es wahrscheinlich einfacher das ganze nachzuvollziehen. 

LG


----------



## Willi2793 (5. Sep 2012)

Hm, ich hab' das nicht als HTML. Ich versuche mal ein Miniprojekt zu machen


----------



## F.S.WhiTeY (5. Sep 2012)

Du musst doch xhtml-Dateien haben 

Die leigen in deinem Projektordner auf der Platte  


NetBeans: C:\Document and Settings\DeinUsername\Documents\NetBeansProjects\Projekt\build\web

eclipse: C:\Document and Settings\DeinUsername\workspace\Projekt\build\web

Allerdings auch nur wenn du die Einstellungen nicht geändert hast.


----------



## Willi2793 (6. Sep 2012)

Oh  da habe ich Dich falsch verstanden. Sorry.

Aber nun habe ich schon was zusammen gebastelt.

Hier die xhtml:

[XML]<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <title>Table Test</title>
        </h:head>
        <h:body>
            <p:layout fullPage="true">
                <p:layoutUnit  position="north">
                    Oben
                </p:layoutUnit>

                <p:layoutUnit position="south">
                    Unten
                </p:layoutUnit>

                <p:layoutUnit position="west" size="175">
                    Links
                </p:layoutUnit>

                <p:layoutUnit position="east" size="175">
                    Rechts
                </p:layoutUnit>

                <p:layoutUnit position="center" style="text-align: center !important">
                    <hutputText value="zentrierter Text"/>
                    <p:dataTable value="#{tableBean.table}" var="tab" style="width: 180px;">
                        <p:column headerText="Id">
                            #{tab.id}
                        </p:column>
                        <p:column headerText="Name">
                            #{tab.name}
                        </p:column>
                    </p:dataTable>
                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
</html>[/XML]

Und die beiden Codes:


```
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.twi.entity;

/**
 *
 * @author Willi
 */
public class TableData {

    /**
     * Creates a new instance of TableBean
     */
    public TableData(Integer id, String name) {
        this.id   = id;
        this.name = name;
    }
    
    private Integer id;

    /**
     * Get the value of id
     *
     * @return the value of id
     */
    public Integer getId() {
        return id;
    }

    /**
     * Set the value of id
     *
     * @param id new value of id
     */
    public void setId(Integer id) {
        this.id = id;
    }
    private String name;

    /**
     * Get the value of name
     *
     * @return the value of name
     */
    public String getName() {
        return name;
    }

    /**
     * Set the value of name
     *
     * @param name new value of name
     */
    public void setName(String name) {
        this.name = name;
    }
}
```


```
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.twi.backing;

import com.twi.entity.TableData;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

/**
 *
 * @author Willi
 */
@ManagedBean
@RequestScoped
public class TableBean {

    private List<TableData> table;

    /**
     * Get the value of table
     *
     * @return the value of table
     */
    public List<TableData> getTable() {
        return table;
    }

    /**
     * Set the value of table
     *
     * @param table new value of table
     */
    public void setTable(List<TableData> table) {
        this.table = table;
    }
}
```

Ich hätte nun gerne die dataTable auch gerne zentriert und stehe da auf dem Schlauch.


----------



## F.S.WhiTeY (8. Sep 2012)

Moin,

so nun hatte ich mal zeit:


```
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <title>Table Test</title>
        </h:head>
        <h:body>
            <p:layout fullPage="true">
                <p:layoutUnit  position="north">
                    Oben
                </p:layoutUnit>
 
                <p:layoutUnit position="south">
                    Unten
                </p:layoutUnit>
 
                <p:layoutUnit position="west" size="175">
                    Links
                </p:layoutUnit>
 
                <p:layoutUnit position="east" size="175">
                    Rechts
                </p:layoutUnit>
 
                <p:layoutUnit position="center" style="text-align: center !important;padding: 0px!important; margin:0px !important; position: absolute!important;">
                    <h:outputText value="zentrierter Text"/>
                    
                    <div id="centerBlock" style="margin-left: auto; margin-right: auto; border-style: dotted; width: 180px;  " >
                        text
                        <p:dataTable value="#{klientListeBean.klientenListe}" var="tab" style="width: 180px;">
                        <p:column headerText="Id">
                            #{tab.id}
                        </p:column>
                        <p:column headerText="Name">
                            #{tab.k_nachname}
                        </p:column>
                    </p:dataTable>
                    </div>
                   
                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
```


----------



## Willi2793 (8. Sep 2012)

Super. Vielen Dank!  Das war genau das was ich wollte!

Es zeichnet sich schon das nächste Problem ab aber da werde ich erstmal selbst probieren


----------



## F.S.WhiTeY (8. Sep 2012)

bitte
wenn du nicht weiter kommst, sag ruhig wieder bescheid


----------

