Comment puis-je obtenir p:selectOneMenu pour calculer sa largeur correctement à l'intérieur des boîtes de dialogue?

Quand je intégrer un p:selectOneMenu dans un p:dialog, sa largeur initiale est trop petit dans Primefaces 3.4. La largeur de ces widgets a été parfaitement bien dans Primefaces 3.2. Ai-je besoin de faire un hack pour contourner ce problème?

Le problème se manifeste dans google Chrome. L'exemple de code suivant illustre le problème:

<p:selectOneMenu value="A" onchange="testDialog.show()">
  <f:selectItem itemLabel="Default item" itemValue="A" />
  <f:selectItem itemLabel="Click here to show the dialog" itemValue="B" />
</p:selectOneMenu>
<p:dialog header="Test dialog" widgetVar="testDialog">
  <p:selectOneMenu value="A">
    <f:selectItem itemLabel="This one here in the dialog" itemValue="A" />
    <f:selectItem itemLabel="doesn't calculate" itemValue="B" />
    <f:selectItem itemLabel="its width" itemValue="C" />
    <f:selectItem itemLabel="correctly" itemValue="D" />
  </p:selectOneMenu>
</p:dialog>
Quel navigateur? Je sais que le dialogue est la largeur est fixe lors de l'utilisation de IE.
Je suis en utilisant google Chrome. Je suppose que je devrais avez mentionné qu'.

OriginalL'auteur Michael Calvin | 2012-09-06

  1. 7

    J'ai été en mesure de reproduire le problème; c'est comme le bouton de la liste déroulante est béatement ignorant le fait que c'est la couverture de la zone de texte. Sur ma configuration, j'ai été en mesure d'obtenir la selectOneMenus à apparaître correctement avec ce CSS correctif:

    <style type="text/css">
    .ui-selectonemenu label.ui-selectonemenu-label {
        padding-right: 28px;
        text-align: left;
    }
</style>

    Edit: Oh oups, je vois que cette solution est très similaire à akoskm commentaire. Mais j'ai essayé à l'époque et text-align: right ne fonctionnait pas pour moi; seulement text-align: left était de quitter les personnages à découvert.

    Cette réponse a fonctionné comme un charme sur l'Aristo thème.

    OriginalL'auteur Jaron

  2. 1

    Envelopper votre p:selectOneMenu dans la boîte de dialogue avec un div

    <p:dialog header="Test dialog" widgetVar="testDialog">
    <div style="width: 100%">
        <p:selectOneMenu value="A">
            ...
        </p:selectOneMenu>
    </div>
</p:dialog>

    Vous pouvez probablement envelopper le selectOneMenu avec certains composants primefaces trop, mais je pense que vous ne devriez pas utiliser des composants de fixer le style pépins.

    J'ai essayé ceci, mais le selectOneMenu ne pas s'étendre à remplir la div. J'ai aussi essayé le style de la selectOneMenu lui-même avec 100% de largeur, mais le texte est aligné à droite et le couvre-boutons en haut à droite de quelques caractères.
    Je missunderstod votre problème à l'un axé sur la p:dialog. Je n'ai pas ce genre de style que vous avez utilisé, mais mettre un peu de rembourrage <p:selectOneMenu value="A" style="text-align: right; padding-right: 15px"> fait le texte qui doit apparaître à l'intérieur de la selectOneMenu, pas de couverts caractères. Bien sûr, la taille de la marge dépend de votre taille de la police.

    OriginalL'auteur Akos K