Größe center layoutunit in PrimeFaces dyanmically basierend auf den Inhalten

Ist es richtig, dass ich mit PrimeFaces-layouts? Sollte ich etwas anderes verwenden?

Antwort: Es hängt davon ab. Ich denke, p:layout fullPage="true" ist eine Komponente, für die möchte eine Seite erstellen, super schnell, einfach und wer nicht genug Zeit mit Arbeit und view-Schicht. Wenn das Vorzeigebeispiel ist entsprechend Ihren Anforderungen kaum, dann gibt es keinen Grund, es fallen zu lassen.

Aber wenn Sie wollen, um anzupassen oder zu ändern, die das Verhalten oder die Funktionalität zu stoppen und Rollen Sie Ihre eigenen.

Vorbereitet habe ich ein kickoff Beispiel, die Ihren Bedürfnissen entspricht, wie ich schon sagte, es ist nicht vollständig, aber es kann Sie begeistern. Beginnen wir mit Komponenten;

<h:form>
    <p:fieldset legend="West" styleClass="west">

    </p:fieldset>
    <p:panel styleClass="north">

    </p:panel>
    <p:fieldset legend="East" styleClass="east">

    </p:fieldset>
    <p:fieldset legend="Center" styleClass="center">   

    </p:fieldset>

    <p:panel styleClass="footer">
        <p:commandButton onclick="makeMe();" value="SeeTheMagic"></p:commandButton>
    </p:panel>
</h:form>

Wie Sie sehen können, dies sind die grundlegenden PrimeFaces Komponenten, zeigen hier die CSS selbst. (Ich habe p:fieldset, Ursache ich mag es looknfeel können Sie p:panel statt).

Beginnen wir mit footer. Es ist eine Sache, die verdient erwähnt zu werden, es ist die position, wir sind einfach platzieren es unten auf der Seite über bottom:0px und position:absolute.

.footer{
    width:100%;
    height:30px;
    padding:30px;
    background: #000007;
    clear: both;
    position: absolute;
    bottom: 0px;
}

Center-Komponente ist HORIZONTAL zentriert, indem margin 0 auto. Es gibt andere Möglichkeiten, das zu tun sicherlich. Auch, wenn Sie wollen, um es vertikal, es ist einfach zu tun, über die Marge. Und margin-top:70px ist nur zu verhindern, überlappen sich mit north-panel.

.center{
    margin: 0 auto;
    width:650px;
    height:200px;
    margin-top: 70px;
    background-color: #f7f7f7;
}

Ost positioniert ist, um die meisten Links und Westen; Umgekehrt ist.

.east{
    width:200px;
    height:400px;
    position: absolute;
    margin-top: 30px;
    right: 0px;
    background-color: #f7f7f7;
}

.west{
    width:200px;
    height:400px;
    margin-top: 30px;
    position: absolute;
    left: 0px;
    background-color: #f7f7f7;
}

Nord-Komponente ist ebenso wie die Fußzeile, aber es ist auf der Oberseite natürlich über top:0px.

.north {
    background-color: black;
    position: absolute;
    top:0px;
    width: 100%;
    height: 40px;
}

Jetzt Seite aussieht sth. ähnlich p:layout fullPage="true". Sie sollten sich anpassen, es ist looknfeel natürlich, vielleicht können Sie einen Blick auf neuere CSS-Eigenschaften wie box-shadow(für north-panel) oder etc. Also über Ihre Anforderung:

Das Verhalten, das ich Suche, ist zum ändern der Größe des center-Bereich dynamisch,
Druck nach unten der footer (south layoutunit) und mit einer scroll-Leiste
für die ganze Seite.

Habe ich vorbereitet, Inhalte, die zunächst überläufe aus dem center-panel und dann gibt es eine Schaltfläche in der Fußzeile, die sagt sth. über Magie und ruft makeMe() js-Funktion welche nicht:

function makeMe() {
    $(".center").css({
        "height":"auto",
        "word-wrap": "break-word"
    });
    $(".footer").css({
        "position":"relative"
    });
}

Einfach erweitert die p:panel's Höhe, jetzt, wenn es 100 Elemente im Inhalt, es wird Kompass alle von Ihnen. Und über position:relative wir sagen Fußzeile "nicht dort bleiben, nur kleben unten in der center-Komponente."

Dies ist, wie es aussieht zunächst:

Wenn Sie laden Ihre Inhalte über ajax gibt es nicht eine scrollbar zunächst. Ich Kopier einfach viel text, das ist, warum es ist eine scrollbar zunächst.

Klicken Sie auf den button:

Wenn dort ist problem nur warnen, der mir, hoffe, das hilft.

InformationsquelleAutor Ömer Faruk Almalı