Afficher le pied de page dans PrimeFaces modèle, lorsque fullPage de p:mise en page est définie sur false

Pied de page ne s'affiche pas (en fait, il est mal affiché en haut de la page), lorsque fullPage est définie sur false dans PrimeFaces modèle.

<p:layout fullPage="false">
    <p:layoutUnit position="north" size="135">
        <!--Put north content here, if any-->
    </p:layoutUnit>

    <p:layoutUnit position="west" size="225" header="Menu Item" collapsible="true">
        <!--Put west content here, if any-->
    </p:layoutUnit>

    <p:layoutUnit position="center" size="2500" maxSize="2500">
        <!--Put center content here, if any-->
    </p:layoutUnit>

    <p:layoutUnit position="east" size="175">
        <!--Put east content here, if any-->
    </p:layoutUnit>

    <p:layoutUnit position="south" size="90">
        <!--Put south/footer content here, if any-->
    </p:layoutUnit>
</p:layout>

Comment afficher un pied de page, lorsque fullpage est définie à false?

EDIT :

si <p:layout> est donné une hauteur comme suit,

<p:layout fullPage="false" style="height: 2000px;">

puis le pied de page est affiché au bas de la page en fonction de la valeur de la height attribut CSS mais il n'est pas encore collant, pied de page - il ne pas s'ajuster selon le contenu de la page.

Alors, Est-il un moyen de le rendre collant?

Mise à jour :

Le comportement reste stationnaire sur PrimeFaces 5.3 final (libération), lorsque fullPage est fixé à false comme dit précédemment tout au long de la question.

semble être un bug dans primefaces, le pied est réellement là, mais vous pouvez voir les lignes de " s'élever au-dessus de la tête.
En effet, c'est clairement un bug. Cette partie est réparable en donnant html,body,.ui-layout-container une hauteur de 100%, mais ensuite il y a un peu de JavaScript passe automatiquement ré-ajuste la hauteur sur cette base, l'amenant à se comporter presque exactement comme fullPage="true". Si vous souhaitez continuer à utiliser <p:layout>, la solution/contournement va être méchant. Il serait préférable de rapporter le bogue de PF gars et re-vérifier encore une fois on s'est fixé. En attendant, êtes-vous ouvert à JS/jQuery en fonction des solutions de contournement?
Le bug a déjà été signalé par VeenarM comme lié, dans sa réponse, mais il n'a pas encore eu d'un premier examen. Par conséquent, il est raisonnable de penser qu'il ne va pas être fixée au moins jusqu'à ce que PrimeFaces version 5.0. De toute façon, je suis à la recherche d'une solution de contournement, si tout, peu importe, si c'est méchant/maladroit/laid/irritant.
J'ai eu également le même post sur le PrimeFaces Forum de la Communauté, mais n'a pas trouvé une solution de contournement.
J'ai fait du pur CSS tentatives, plein de !important mess pour remplacer inline/JS généré styles et un autre JS oneliner ou deux pour modifier le DOM HTML structure. Je suis venu près, mais le tout est très fragile et se rompt dès lors j'ai par exemple redimensionner la fenêtre, ou quand j'ai de développer/réduire "l'occident" unité, en raison de la layout.js. C'est simple, clair terrible. Je suis très tenté de dire simplement déposer l'ensemble de la PF disposition de chose et de composer la mise en page vous-même le "HTML" de façon à l'aide de certains divs (ou p:panneaux) et quelques lignes de CSS. Mais alors il n'est pas pliable/redimensionnable/refermable.

OriginalL'auteur Tiny | 2014-03-22

7

De visualiser facilement ce que vous en fin de compte (et à confirmer vos besoins pour moi), voici en SSCCE saveur un pur HTML/CSS solution de ce que vous êtes (apparemment) pas de demander. Le sticky footer solution est en grande partie basée sur Ryan Fait la démarche de (un min-height:100% et une marge négative sur l'élément conteneur qui couvre tout, mais le pied de page), et cela ne prend pas en charge IE6/7 plus (en raison de :after pseudoselector), par la présente, la simplification du code HTML (pas de non-sémantique désordre comme <div id="pushfooter"> nécessaire). Remarque: les couleurs de fond sont purement pour la visualisation.
```
<!DOCTYPE html>
<html lang="en">
<head>
<title>Stack Overflow Question 22584920</title>
<style>
html, body {
height: 100%;
min-width: 800px;
margin: 0;
}
#container {
min-height: 100%;
margin: 0 auto -90px; /* Negative of #footer.height */
}
#header {
height: 135px;
background: pink;
}
#menu {
float: left;
width: 225px;
background: khaki;
}
#content {
margin-left: 225px; /* Same as #menu.width */
margin-right: 175px; /* Same as #side.width */
background: lemonchiffon;
padding: 1px 1em; /* Fixes collapsing margin of p's on div, feel free to remove it */
}
#side {
float: right;
width: 175px;
background: palegreen;
}
#footer, #container:after {
height: 90px;
}
#footer {
background: orange;
}
.clearfix:after {
display: block;
content: " ";
clear: both;
}
</style>
</head>
<body>
<div id="container" class="clearfix">
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="side">Side</div>
<div id="content">
<p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
```
Remarque: en raison de la façon dont les flotteurs de travail, la <div id="side"> (la "east unité") a, dans le balisage HTML pour être placé avant tous les non-éléments flottants à la même "ligne", comme le <div id="content"> (le "centre de l'unité"), sinon il va être aligné par rapport au bas de la dernière non flottant élément.

Maintenant, afin d'atteindre exactement la même chose avec le <p:layout> chose, qui, fondamentalement, rend presque la même structure HTML, uniquement avec le pied de page est encore à l'intérieur du conteneur et de l'est de l'unité après le centre de l'unité, vous devez vous assurer qu'aucun de la disposition des unités est pliable/caisses/redimensionnable (ces attributs tous déjà par défaut à false et peut donc être omis par souci de concision) et que vous appliquez la PrimeFaces-builtin clearfix classe de style ui-helper-clearfix sur le conteneur de l'unité pour effacer les flotteurs (sinon, le menu, le contenu et le côté recoupe le pied de page lorsque l'écran est réduit à la verticale):
```
<p:layout styleClass="ui-helper-clearfix">
<p:layoutUnit position="north" size="135">
<p>Header</p>
</p:layoutUnit>
<p:layoutUnit position="west" size="225" header="Menu Item">
<p>Menu</p>
</p:layoutUnit>
<p:layoutUnit position="center">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</p:layoutUnit>
<p:layoutUnit position="east" size="175">
<p>Side</p>
</p:layoutUnit>
<p:layoutUnit position="south" size="90">
<p>Footer</p>
</p:layoutUnit>
</p:layout>
```
Vous pouvez ensuite appliquer le code CSS suivant dans votre PrimeFaces-remplacer la feuille de style de supprimer/remplacer tous les "pas pertinent" PrimeFaces générés par les propriétés CSS sur ces disposition des unités en définissant le positionnement absolu avec des offsets fixes/dimensions de retour à initiale/par défaut les valeurs (note: la fonction exacte de !important est d'être en mesure de remplacer codé en dur ou en ligne, style propriétés d'une véritable feuille de style, il y a dans ce cas particulier, tout simplement pas d'autre option aussi longtemps que vous n'avez pas à réécrire PrimeFaces composants et moteurs de rendu). Le point clé est que vous devez vous retrouver avec exactement le même code HTML/CSS (par défaut) comme le SSCCE:
```
html, body {
height: 100%;
min-width: 800px;
margin: 0;
}
.ui-layout-container {
min-height: 100%;
height: auto !important;
margin: 5px;
margin-bottom: -90px; /* Negative of footer height. */
}
.ui-layout-unit {
position: static !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
height: auto !important;
}
.ui-layout-unit-content {
display: block !important;
height: auto !important;
}
.ui-layout-west {
float: left;
margin: 5px 0 !important;
}
.ui-layout-center {
margin: 5px 0 !important;
margin-left: 230px !important; /* Menu width plus margin between panels. */
margin-right: 180px !important; /* Side width plus margin between panels. */
}
.ui-layout-east {
float: right;
margin: 5px 0 !important;
}
.ui-layout-container:after {
height: 85px; /* Footer height minus margin between panels. */
}
.ui-layout-south {
margin: 5px !important;
visibility: visible !important;
}
```
Et enfin ajouter le script suivant dans l'ordre de bouger le côté (à l'est de l'unité) avant le contenu (unité centrale), de sorte que la flotte aller intention, et pour déplacer le pied de page à la fin de corps, de sorte qu'il est à l'extérieur de l'élément conteneur:
```
$(function() { 
$(".ui-layout-east").insertBefore(".ui-layout-center");
$(".ui-layout-south").appendTo("body");
});
```
Assurez-vous que ce script est ré-exécuté lorsque vous effectuez une mise à jour ajax avec @all sur le même point de vue pour une raison quelconque (qui en est à son propre une mauvaise idée).

Avec cette "solution" (je l'appellerais plutôt un hack et il suffit de jeter tout de suite et aller pour un sain d'esprit et de nettoyer le HTML/CSS solution, si nécessaire avec <p:panel>s au lieu de <div>s), c'est encore un peu fragile; l'auto-inclus layout.js script auto-ajuste la disposition des unités sur chaque fenêtre de redimensionnement. Mais jusqu'à présent, ils ne semblent pas casser quoi que ce soit dans tous les navigateurs modernes que j'ai essayé (IE>8).

Je vous remercie beaucoup d'avoir pris beaucoup de temps. Va lui donner un essai!
J'ai certains composants de l'ouest et de l'est des unités comme <p:slider> affiché à l'intérieur de <p:panel> et une couleur de la liste affichée à l'aide de <p:dataGrid> à l'intérieur de <p:panel>. Ils sont tous foiré, leurs positions, l'apparence, la hauteur, la largeur... considérablement changé. Il nécessite un renforcement de la CSS/JS pour les afficher correctement. Je manque beaucoup de connaissances de HTML/CSS/JS (quelqu'un avec suffisamment de connaissances en HTML/CSS/JS pouvez bien sûr le faire, mais certainement pas moi), j'ai quitté avec certains choix sont, d'exclure le pied de page à partir du modèle à jamais, utiliser fullPage="true" ou de l'utilisation de la plaine de vanille HTML/CSS modèle ha ha 🙂
J'ai rapidement essayé un <p:panel><p:inputText id="i"/><p:slider for="i"/></p:panel> dans le centre de l'unité, semble correct.
Les composants sur le centre de l'unité de l'air fin, mais les composants à l'ouest et à l'est des unités de shuffle.
Il n'y a aucune unité est dans la question/réponse? Si vous le gardez, la réponse devrait fonctionner, sinon la question et la réponse doit être modifiée.

OriginalL'auteur BalusC
2

Cela peut ou peut ne pas être un bug dans PrimeFaces - vous êtes mieux de demander. La mise en page est en fait sur votre page si vous vérifiez la source, mais son positionnement est au-dessus de la tête, probablement parce qu'il n'a aucune idée de l'endroit où il doit être. Dans une pleine page de il sait que sa position généré par la page, mais sinon, il pourrait être n'importe où vous voulez qu'il soit. Essayez d'utiliser CSS pour le déplacer etc, reportez-vous à.
et l'utilisation styleClass, etc pour attacher des classes, mon hack était juste pour utiliser !important que vous ne devriez pas vraiment le faire.
```
.ui-layout-pane-south {
top: 200px !important;
}
```
etc..

Bien que je suis plus enclin à penser que c'est un bug comme aucun des CSS est appliqué correctement.

J'ai créé un rapport sur PF et j'espère que quelqu'un peut donner un peu plus d'informations sur le problème.

Ce CSS peut-on appliquer de sorte que le pied de page automatique des positions en fonction du contenu (il doit immédiatement ci-dessous le contenu, peu importe la façon dont beaucoup de contenu, nous d'affichage/de chargement de la page)?
Je ne sais pas, j'en sais assez CSS pour obtenir de moi, c'est quelqu'un elses travail 🙂 Comme je l'ai mentionné, il semble que la surveillance et probablement vous préférerez peut-être utiliser fullPage="true" pour l'instant. Je vais reponsd de retour avec ce que jamais je obtenir de l'IssueTracker sur Primefaces site web.
pas de !important, veuillez
on n'a visiblement pas lu l'ensemble des commentaires disant: "qui vous ne devriez pas vraiment faire"...
Le statut d'un problème sur le tracker est NotMovedToGitHub : "le Marquage comme NotMovedToGitHub, si vous souhaitez fournir d'autres commentaires, veuillez créer un nouveau ticket sur GitHub avec des détails de continuer la discussion là-bas."

OriginalL'auteur VeenarM
1

Apparemment <p:mise en page> nécessite une hauteur appropriée, lorsque fullPage est fixé à false. La hauteur est nécessaire pour afficher le pied de page à la position appropriée (il doit se placer au bas de la fenêtre du navigateur) comme,
```
<p:layout fullPage="false" style="height: 2000px;">
```
Appris de PrimeFaces Extensions <pe:mise en page> qui ne fonctionne pas avec l'erreur suivante dans la boîte d'alerte JavaScript au chargement de la page,

/Disposition de l'INTERFACE utilisateur de l'Initialisation d'Avertissement de La mise en page-conteneur
"DIV#mainForm:fullPage" n'a pas de hauteur. Par conséquent, la mise en page est
0-hauteur et donc "invisible"!

si fullPage de <pe:layout> est fixé à false et la hauteur n'est pas défini. Pour que cela fonctionne correctement, il a besoin de la hauteur comme suit.
```
<pe:layout id="fullPage" 
fullPage="false" 
style="height: 2000px;" 
stateCookie="true">
```
_{Il est difficile de dire si c'est délibéré ou intentionnel.}

Il serait délicieux, si quelqu'un pouvait exposer comment ajuster le pied de page selon le contenu de la page, un collant pied de page.

Juste pour préciser : Ce n'est pas une réponse adaptée aux besoins réels. Il manque le collant pied de page concept.
Mais la question n'est pas l'état qui.
Annexé à la question du corps.

OriginalL'auteur Tiny
1

Pour s'assurer que la mise en page DIV a une hauteur relative :

1_ Tous les composants entre le CORPS et la mise en page doit avoir une hauteur relative, la sorcière doit être de 100%.

2_ Toujours utiliser des DIV à la place de l'écart entre le CORPS et votre mise en page (pas des éléments inline).

exemple :
```
<body>
<h:panelGroup layout="block***important***" style="height:100%" >
<pe:layout widgetVar="pageLayoutWV" fullPage="false" style="height:100%" > 
</pe:layout>
</h:panelGroup>
</body>
```
Dans ce cas, il dosent, ajoutez ce code à votre page, (j'ai corrigé il y a longtemps mais sa a probablement un rapport avec le problème) :
```
function BaseWidgetInit(cpn, cfg) {
cpn.cfg = cfg;
cpn.id = cfg.id;
cpn.jqId = PrimeFaces.escapeClientId(cpn.id),
cpn.jq = $(cpn.jqId);           
//remove script tag
$(cpn.jqId + '_s').remove();
}   
if (PrimeFaces.widget.Layout)
PrimeFaces.widget.Layout = PrimeFaces.widget.Layout.extend({
init: function(cfg) {
BaseWidgetInit(this, cfg);        
this.cfg = cfg;
this.id = this.cfg.id;
this.jqId = PrimeFaces.escapeClientId(this.id);
if(this.cfg.full) {                                                 //full
this.jq = $('body');
} else if(this.cfg.parent) {                                        //nested
this.jq = $(PrimeFaces.escapeClientId(this.cfg.parent));
} else {                                                            //element
this.jq = $(this.jqId);
this.jq.css('height', $(window).height()-10);
}        
var _self = this;
$(this.jq).data("layoutContainer", null);
$(this.jq).data("layout", null);
if(this.jq.is(':visible')) {
this.render();
} 
else {
var hiddenParent = this.jq.parents('.ui-hidden-container:first'),
hiddenParentWidget = hiddenParent.data('widget');
if(hiddenParentWidget && hiddenParentWidget.addOnshowHandler) {
hiddenParentWidget.addOnshowHandler(function() {  
return _self.render();
});
}
}
}
});
```
je vous conseille aussi, utiliser la mise en page de PF de l'Extension de la bibliothèque, de ses plus stable, un modèle peut être trouvé ici erp.agitech.net admin/pass

1) est faux (il faut aller jusqu'à <html>) et 2) n'est pas nécessaire à tous (donc il est parfaitement bien de n'avoir aucune) encore de votre réponse, cela implique que. Que l'extrait de code JavaScript serait plus utile si vous expliquer en détail ce qu'est exactement vous avez changé et pourquoi, au lieu de rechercher&trouver jeu.
1) Pas de travail pour moi, sans aller jusqu'à HTML, comme je l'ai dit tous les composants entre le CORPS et la Mise en page, 2) je ne comprends pas vous mon anglais est limité
Euh, c'est de travailler pour vous parce que vous avez utilisé le script. Div/span autour de la mise en page est complètement inutile. Avec ce script, vous n'avez pas besoin de déclarer les hauteurs.
OK, maintenant je comprends u, comme je l'ai dit je le modifie, il y a longtemps, et maintenant je suis en utilisant le PF extension Mise en page par défaut PF mise en page, mais je pense que j'ajoute cette ligne.jq.css('height', $(window).hauteur()-10);
L'exemple de montrer qu'aucune DURÉE doit être comprise entre le CORPS et la Mise en page sinon la Mise en page de l'initialisation échoue

OriginalL'auteur Nassim MOUALEK

Vous devez vous connecter pour publier un commentaire.