Discussion :

[jecomprendsrien]

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 :



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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Comment pourrais je m'y prendre ?

Merci beaucoup

[Mishulyna]

Bonsoir,

Essaie d'ajouter ceci à ton fichier .css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[jecomprendsrien]

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...

[jecomprendsrien]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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");
 
});