PrimeFaces p:selectOneMenu largeur

j'ai remplacé .ui-selectonemenu, .ui-selectonemenu-label:

.ui-selectonemenu{
     width: 100% !important;
}
.ui-selectonemenu-label{
     width: 100% !important;
}  

OriginalL'auteur ehab refaat

Le seul moyen que j'ai trouvé est d'utiliser jQuery pour initialiser la largeur au moment du chargement.

Vous pouvez simplement créer une classe CSS comme ceci (juste pour être utilisé comme un futur sélecteur de) :

.full-width
{

}

Et l'ajouter à votre composant :

<p:selectOneMenu value="#{bean.selectedObject}" id="idSelect" converter="objectConverter" styleClass="full-width">
    <f:selectItems value="#{bean.objectsList}" var="varObject"  itemLabel="{varObject.label}" itemValue="#{varObject}" />
</p:selectOneMenu>

Puisque vous aurez besoin jQuery, vous devez ajouter ce à l'intérieur de votre h:head si vous n'êtes pas déjà PrimeFaces composants qui l'utilisent.

<h:outputScript library="primefaces" name="jquery/jquery.js" />

Voici le petit script que d'initialiser tous les p:selectOneMenu dans le sélecteur :

<script>
    $(document).ready(
        function()
        {
            $("div.ui-selectonemenu.full-width").each(
                function()
                {
                    $(this).css("width",$(this).parent().width());
                }
            );
        }
    );
</script>

OriginalL'auteur Alexandre Lavoie

J'ai maintenant un bon correctif pour cela.

Primefaces 6.0 a maintenant un nouveau champ appelé autoWidth que par défaut est définie sur true, et vous pouvez mettre à false.

SI vous n'avez que certaines des réponses ci-dessus le dire et de le mettre à false, tout ce que vous faites est jouer à la roulette avec vous app css.
Par la valeur false, primefaces laissera à vous de gérer la largeur.
Vous pouvez soit avoir une largeur définie sur la selectOneMeny expliclitly par l'attribut de style, ou une certaine classe css dans votre application.

Mais ce n'est pas ce que cette question est à propos, cette question est sur le fait que la valeur par défaut behaivor de ne pas spécifier la largeur d'un menu déroulant de fait conduit nos menus déroulants normalement être trop petit pour les étiquettes.

Donc, ce que nous voulons, c'est la autoWidth de travail proplerly.

Enfin, j'ai regardé le composant et le moteur de rendu, et il est évident que les auto-largeur mécanisme ne fonctionne pas dans le backend côté.
Le backend côté seulement construit quelques JSON comme des données qui le primefaces javascript constructeur peut utiliser pour correctement régler sur le navigateur, le comportement du widget.

Si vous loook à primefaces 6.0 code source, le bug est dans META-INF\ressources\primefaces\formulaires

De recherche pour le code qui dit la chose suivante:

PrimeFaces SelectOneMenu Widget

Dans cette fonction javascript chasse pour le morceau de code qui dit:

_render: function() {
        if(this.cfg.autoWidth) {

Dans cette section de code votre bug est la ligne suivante:

this.jq.css('min-width', this.input.outerWidth());

Ici, j'ai appliqué le patch suivant, qui nous l'espérons devrait travailler en geting la liste déroulante, d'être aussi gras que la plus grande étiquette:

 _render: function() {
        if(this.cfg.autoWidth) {
            //BEGIN: PATCHING 
            //ORIGINAL CODE:
            //this.jq.css('min-width', this.input.outerWidth());            
            //BUGFIX:
            //(a) compute the original min-with primefaces 6.0 would put on the root div
            var primefacesBugWidth = this.input.outerWidth();
            //(b) compute the length of the hidden select element  with all the labels inside of it
            var widthOfHiddenDivWithSelectLabels = this.jq.find('div select').width();
            var widthOfTheDropDownTriangle = this.jq.find('.ui-selectonemenu-trigger.ui-state-default.ui-corner-right').width();
            var widthOfLabelPlusTraingle = widthOfHiddenDivWithSelectLabels + widthOfTheDropDownTriangle;
            //(c) we will use whichever length is longer
            //in bug-fixed primefaces version the outerWidth should be computed correctly
            //but this seems not to be the case 
            var maxWidthOfTwoPossibleOptions = primefacesBugWidth > widthOfLabelPlusTraingle ? primefacesBugWidth : widthOfLabelPlusTraingle;
            this.jq.css('min-width', maxWidthOfTwoPossibleOptions);
            //END: PATCHING
        }        
    }

L'idée de le code ci-dessus est:
(a) regardez le caché div avec toutes les étiquettes et obtenir la largeur de la div
(b) ajouter à cette longueur, la largeur nécessaire pour le primefaces triangle orienté vers le bas
(c) comparer la largeur, nous avons calculé à ce qui est suggéré par primefaces et qui semble être trop petit

NOTE:
Pour installer le correctif, vous devez copier tous les Primaces code de la SelectOneWidget.
L'ajouter à un fichier javascript sous votre contrôle.
Assurez-vous que vous n'exécutez la compilation de votre fichier javascript après le primefaces javascript fichier a été chargé.

Normalement primefaces est rendu à la TÊTE.
Donc, si vous avez vous jasvacript comme la dernière ement dans le corps, vous devriez être bien.

L'application de correctifs fonctionne bien pour moi.
C'est un code que je n'aime pas à maintenir cependant.

OriginalL'auteur 99Sono

Si votre p:selectOneMenu est dans un DIV avec une affectation de largeur, je trouve réglage style="width:100%;" sur le p:selectOneMenu semble fonctionner dans mon cas.

OriginalL'auteur peater

Ceux qui ont encore eu de problème avec selectonemenu pouvez essayer cette

.ui-selectonemenu {
    min-width: 0 !important;
}

Parfaitement fonctionné pour moi.

OriginalL'auteur Prakash Bist