[JSF][PrimeFaces] problème d'affichage d'icône sur selectOneMenu

Salut,

je teste pour la première fois PrimeFaces et j'ai un problème d'affichage de l’icône de la liste déroulante sur une <p:selectOneMenu>. Voici l'image :

http://imageshack.us/a/img690/6435/iconel.png

Le triangle n'est pas centré alors que sur le showcase PrimeFaces, il y est.

J'ai réduit ma page au maximum et viré tout mon CSS afin de ne laisser que celui de PF, mais même résultat. J'ai testé 2-3 doctypes différents aussi mais c'est pareil...

Du coup, j'ai regardé le CSS de ce composant avec firebug et j'ai vu qu'il y a juste une différence entre leur composant et le mien, ils ont rajouté un :

Code:

---

1 2	font-size: 12px !important;

---

ce qui réduit la police d'écriture, donc la hauteur du composant et cela centre donc artificiellement l’icône. En rajoutant cela dans mon CSS, cela marche maintenant pour moi mais c'est une solution bancale car à 11px ou 13px l'icône n'est plus centrée...

Je cherche donc à centrer via CSS mon icône dans mon selectOneMenu mais comme je suis une belle quiche en CSS j'y arrive pas :aie:

Comment pourrais je m'y prendre ?

Merci beaucoup

Bonsoir,

Essaie d'ajouter ceci à ton fichier .css

Code:

---

1 2 3 4 5

.ui-widget, .ui-widget .ui-widget { font-size: taillepx !important; }

---

C'est jQuery UI qui gère ça, PrimeFaces ne fait que s'en servir. Plus d'infos: jQuery UI
Autre avis: stackoverflow - Globally changing font size in PrimeFaces

Salut,

en fait je voudrais éviter de coder en dur les px et faire ceci en % mais finalement je pense pas que cela soit possible car j'ai vu que l'image affichée par PF pour le triangle est en fait composée de plusieurs autres symboles cachés par des overflow donc je peux pas centrer facilement cette image je pense.

Tant pis je vais utiliser un margin et ce sera bon...

je m'en suis finalement sorti avec du javascript ce qui a l'avantage d'être dynamique :

Code:

---

1 2 3 4 5 6 7 8 9

$(document).ready(function() {   var triangle_h = parseInt($("span.ui-icon.ui-icon-triangle-1-s").css("height")); var div_h = parseInt($("div.ui-selectonemenu-trigger.ui-state-default.ui-corner-right").css("height"));   $("span.ui-icon.ui-icon-triangle-1-s").css("margin-top", (div_h-triangle_h) / 2 + "px");   });

---