Icône jquery ui non centrée sur l'étendue

J'ai une travée qui contient une icône jquery-ui et une travée externe qui obtient l'état d'erreur. Toutefois, l'icône est décalée vers le haut, de sorte qu'une partie de l'icône n'est pas contenue dans la plage externe. Je peux le dire car avec l'erreur ui-state, la portée externe a un fond rouge, et l'icône est partiellement au-dessus de cette zone rouge.Icône jquery ui non centrée sur l'étendue

Des idées pourquoi?

<span style="width:20px;height:20px;display:none" class="userNameInvalidIcon ui-state-error"> 
    <span style="display:inline-block" class="ui-icon ui-icon-circle-close"/> 
</span>

enter image description here

Source

2011-05-09 kralco626

Fonctionne très bien en chrome. Et, malgré les années en tant que gars de l'interface utilisateur, je suis déconcerté pourquoi vous voudriez mettre en place de cette façon. Si vous voulez juste une bordure autour de l'icône, pourquoi ne pas la configurer de cette façon via css et laisser tomber la div externe? – bpeterson76

Je ne veux pas seulement une bordure, je veux qu'elle ait une erreur d'état d'ui. Je pense que mettre une couleur de bordure statique et une couleur d'arrière-plan est la mauvaise façon de le faire, plutôt que d'utiliser la classe css fournie par Jqueryui, qui changera si les couleurs de mon thème changent. La raison pour laquelle j'ai besoin de la portée externe, c'est que si j'applique l'erreur d'état-ui à la portée interne, il y a un problème avec l'icône elle-même. Je pense que cela crée un problème de ce que les pixels de la feuille d'image à utiliser pour l'icône. – kralco626

Pouvez-vous essayer ce (fonctionne FF, IE et Chrome):

<div style="width:17px;" class="ui-corner-all ui-state-error"> 
    <span class="ui-icon ui-icon-circle-close"></span> 
</div>

HTH

Source

2011-05-09 17:15:20 Raja

Je dois avoir le 'display: inline-block', sinon il ne s'affiche pas en ligne avec les éléments environnants, par exemple, une autre icône à côté de lui. – kralco626

Essayez ceci:

<span style="width:20px;height:20px;display:none" class="userNameInvalidIcon ui-state-error"> 
    <span style="display:inline-block;vertical-align: middle;" class="ui-icon ui-icon-circle-close"/> 
</span>

Source

2011-05-11 08:18:05 thecodeparadox

.ui-icon 
{ 
    position: relative !important; 
    margin: 0px !important; 
    padding: 0px !important; 
    height: 100% !important; 
    width: 100% !important; 
    top: 0px !important; 
    left: 0px !important; 
}

Source

2012-05-02 15:18:50 Josh123

Vous voudrez peut-être expliquer votre réponse au profit de l'OP – Luca

Icône jquery ui non centrée sur l'étendue

Répondre

Questions connexes