Primefaces de la barre de menu menuitem Largeur

Je vais avoir des ennuis avec la menuitem
🙁

Voulu inclure un pic, mais n'était pas autorisé
Donc, la question est stupide, sans qu'il

Je n'arrive pas à modifier la largeur du menu déroulant,
J'ai inclus un style dans ma tête et une largeur attrib dans
chaque menuitem, mais elles n'ont fait aucune différence:

<style>
ui-menu .ui-menu-parent .ui-menu-child
{
    width: 400px; /* exagerated !! */
}
</style>

Lorsque l'élément de menu est mise en evidence, la barre de sélection est la largeur correcte !

Des Indices ???, voici un exemple de la barre de menu

<p:menubar>
    <p:submenu label="Menu 1"
        style="text-align: left;">

        <p:menuitem ajax="false" 
                    action="/Page1"
                    value="Page 1" 
                    style="width: 350px;"/>

        <p:menuitem ajax="false" 
                    action="/too_long_page"
                    value="Some really long menu text that is far too long"
                    style="width: 350px;" />

        <p:menuitem ajax="false" 
                    action="/too_long_page"
                    value="Some really long menu text that is far too long"
                    style="width: 350px;" />

    </p:submenu>
    <p:menuitem ajax="false" 
                action="/Page2"
                value="Page 2" />
</p:menubar>

OriginalL'auteur user784298 | 2012-03-27

primefaces

16

si vous souhaitez que la largeur de suivre votre contenu, de l'utilisation de ce
```
ul.ui-menu-child {
    white-space: nowrap;
    width: auto !important;
}
```
Probablement le meilleur css pour ce cas
Sur Primefaces 6.2, ce travail correctement pour pratiquement toutes mes menus. Sauf pour les <p:sous-menu> qui contient des éléments avec des icônes qui s'affichent sur 2 lignes. Pour tous ces sous-menus, j'ai fixé la largeur explicitement. Je vote 🙂

OriginalL'auteur Aaron
5

utiliser ceci:
```
<style>    
       ul.ui-menu-child
        {
            white-space: nowrap;
            width: 290px !important;
        }
</style>
```
Seulement changer les pixels dont vous avez besoin 🙂 et déroulante largeur de menu va changer.

OriginalL'auteur DANYDHSV

 <style>
     ul.ui-menu-child{
     width: 250px !important;
        }
 </style>

solution temporaire.

OriginalL'auteur Mehmet

2

Cela devrait vous aider:
```
.ui-menu {
    min-width: 350px;
}
```
Merci, toutefois, il a essayé toutes les variantes de cela, je pense que c'est plus bas, j'ai même essayé important!, si je pouvais télécharger une capture d'écran, vous verrez ce qui est le problème, ou à essayer de le recréer à l'aide de très long texte sur ou à plusieurs de vos éléments de menu.
Il fonctionne pour moi. Essayez de supprimer tous les autres références de l'interface utilisateur-menu-de tout ce à partir de votre css sources. J'ai aussi changé la définition de min-width largeur modifie également la p:barre de menus de la largeur.
Merci, va donner un coup de feu, quand j'ai la chance, malheureusement j'ai cette horrible chose qu'on appelle "travail" à faire :- }

OriginalL'auteur javaxian
1

L'élément de style à l'intérieur de la tête est susceptible d'être remplacée par la Primefaces des feuilles de style qui sont placés après sur la page de balisage. Si vous affichez la page par Firebug vous remarquerez probablement que le style personnalisé est en fait remplacée par la Primefaces les feuilles de style.

Sur cette note, votre feuille de style est correct, car à l'aide de Firebug, j'ai été en mesure d'augmenter la largeur du menu en forçant ce style sur l'élément du DOM.

Essayer de placer cette balise style dans le corps au lieu de cela et voir si cela fait une différence.

mmm intéressant nom d'utilisateur, de toute façon, vais essayer, merci, voir les commentaires ci-dessus

OriginalL'auteur maple_shaft

Merci, merci, merci, enfin une réponse
ici, il est

<?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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Prime Faces Examples - ??</title>
        <style>
            ul.ui-menu-child
            {
                width: 460px !important;
            }
        </style>
    </h:head>
    <h:body>
        <h:form>  
            <p:menubar>
                <p:submenu label="Menu 1"
                           style="text-align: left;">

                    <p:menuitem ajax="false" 
                                action="/Page1"
                                value="Page 1" 
                                style="width: 450px;"/>

                    <p:menuitem ajax="false" 
                                action="/too_long_page"
                                value="Some really long menu text that is far too long"
                                style="width: 450px;" />

                    <p:menuitem ajax="false" 
                                action="/too_long_page"
                                value="Some really long menu text that is far too long"
                                style="width: 450px;" />

                </p:submenu>
                <p:menuitem ajax="false" 
                            action="/Page2"
                            value="Page 2" />
            </p:menubar>
        </h:form>  
    </h:body>
</html>

OriginalL'auteur

Autre alternative

ul.ui-menu-child {
    width: auto !important;
    min-width: 200px;
}

OriginalL'auteur myset

Vous devez vous connecter pour publier un commentaire.