Tableau et alignement des icones/textes en CSS

Bonjour tout le monde,

EDIT : j’ai avancé
je me bats avec le css d’un tableau pour avoir le résultat voulu.
Ce que j’obtiens pour le moment :
image

J’ai mis la bordure et le rouge pour bien voir les limitations de mon tableau.

J’aimerais

  • aligner les icones à droite de mes cases de gauche (délimiter en rouge pour voir la première case)

Voici ce que j’ai essayé de faire pour le moment :

j’ai mis un text-align : right qui n’a pas l’air d’avoir d’effet

une petite aide?
Merci d’avance
olivier

Essaye display:inline-block; ou display:block;

Text-align:right !important; peut peut être aussi fonctionner, tu as pt être une classe CSS a surcharger ?

1 « J'aime »

Merci pour ton aide.
Figure toi, que j’avais eu comme idée d’englober mon widget dans un span avant de dormir.
Malheureusement,le résultat reste le même.
J’ai regardé le code source :

<div class="cmd cmd-widget cursor history cursor tooltipstered" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="1809" data-cmd_uid="cmd1809__187701825__" data-version="dashboard">
  <div class="title hidden">
    <div class="cmdName">isopen_etage</div>
  </div>
  <div class="content-sm">
    <span class="iconCmd"><i class="icon jeedom-fenetre-ferme" style="color:#44719e;"></i></span>
  </div>
  .........  
</div>

C’est cette ligne , qui embête le monde

 <div class="cmd cmd-widget cursor history cursor tooltipstered" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="1809" data-cmd_uid="cmd1809__187701825__" data-version="dashboard">

Je ne sais pas, si je pourrais trouver une solution :frowning:

Salut,

Juste pour te remettre sur la voie, c’est le style appliqué par jeedom sur les tableaux qui bloque certaines possibilités de positionnement. La ligne du widget que tu mentionnes comme étant fautive ne fait rien c’est la div qui englobe le widget

D’ou le override avec le !important.
si ca ca ne fonctionne pas, c’est chiant :slight_smile:

Faudrait aller faire un override global dans les css perso dans les réglages.

EDIT :
Chez moi, ca fonctionne crême :

Capture d’écran 2020-05-19 à 11.35.21

Le code :

Justement, mon text-align: right … se fait sur ce div (on le voit , il est bien aligné à droite dans la case). Mais comme il y a une grande marge à droite, mon icone n’est pas collé.

Quand je fais un text-align: left … mon icone se met bien sur la gauche
image

Il y a toujours cette bordure à droite de l’image (cf capture). je pense que ce fameux div ne se met pas à la taille de l’image. Il laisse une marge.

En bidouillant directement dans chrome cette fameuse div englobante :

 <div class="cmd cmd-widget cursor history cursor tooltipstered" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="1809" data-cmd_uid="cmd1809__1964254967__" data-version="dashboard">

en

<div class="cmd  cursor history cursor tooltipstered" data-type="info" data-subtype="binary" data-template="tmplicon" data-cmd_id="1809" data-cmd_uid="cmd1809__1964254967__" data-version="dashboard">

J’ai viré la classe cmd-widget (qui me met cette bordure mais qui je pense … doit servir à autre chose :-p)… il m’aligne bien à droite
Le soucis vient de la .
image

Quand tu fais afficher la bordure de ta case … ton icone se colle bien à droite de ta bordure?

Non le souci ne vient pas de la classe cmd-widget. D’ailleurs en enlevant cette classe sur un design hors d’un tableau la commande ne se positionne plus comme il faut.

Bref ça vient surtout de la disposition en tableau, le sujet a déjà été abordé plusieurs fois sur le forum.

je viens de trouver le fautif :
image

Min-width: 70px;

tu le met à 0 … plus de bordure.

du coup, faudrait que je puisse surcharger la classe cmd-widget.
Mais cela jouera dans tout l’appli.

Elle ne fait pas que ça cette classe:

ça peut donc se corriger au cas par cas en perso CSS avancée ! Et hors d’un tableau ta commande ne ressemble plus à rien sans cette classe qui est primordiale pour le bon affichage global des widgets.

Mais si tu veux l’enlever fais toi plaisir…

Je le sais bien.
Mais du coup, tant qu’il y aura cette bordure. je me retrouve bloqué.

Je peux surcharger pour tout mettre à droite (div.cmd-widget{ text-align : right; })
Mais j’aurais le soucis pour aligner à gauche (et peut-être d’autres soucis car je ne connais pas tout le reste).

a moins, que tu as une autre solution pour le faire juste sur ce tableau.
C’est peu-être une des cases de la perso des tableaux mais je n’ai pas trouvé laquelle.

un min-width:unset !important; dans la CSS de la cellule ne suffit pas ?

Merci pour ton aide.
Je connaissais pas cette commande.

J’ai essayé de le mettre à plusieurs endroits mais cela n’a pas l’air d’agir.

à moins que j’ai fait une faute de frappe que je ne vois pas.

J’ai fini par faire dans le css avancé

td.tableCmdcss div.cmd-widget {
	min-width: 0;
}

Je verrais s’il y a beaucoup d’impact à l’utilisation.
Malheureusement en css, on ne peut que descendre des niveaux et pas remonter sinon je serais parti de mon widget.