Aligner les boutons "reply/new/watch" avec le cadre du forum

[Yunie16]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis que j'ai changé la mise en page des boutons
Lien du forum : https://second-chances.forumactif.com/

Description du problème

Bonjour,

Depuis que j'ai changé l'apparence du bouton "surveiller ce sujet" pour qu'il soit accordé aux autres et que je l'ai glissé sous "répondre" et "nouveau sujet", je ne parviens plus à les aligner correctement avec le cadre des messages.
J'ai mis du margin pour l'aligner correctement, mais je me suis rendue compte que ça n'allait qu'avec mon écran, donc là en direct du boulot, c'est décalé comme sur la capture d'écran (et sur téléphone c'est pire)...

J'ai testé de changer les position (relative, absolute) mais ça part en sucette quand je change, j'ai tenté aussi avec des % pour le margin (comme pour la navbar), mais ça revient au même, donc je ne sais pas trop comment faire. Pour les blogs j'ai pas encore touché et je vois qu'il n'y a rien du tout, mais quand je retire le style que j'ai mis ça part encore plus en cacahuète ^^'

Voilà le template en question, c'est au niveau des lignes 35 (haut de page) et 148 (pour la même chose en bas) :

Code:

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
   //<![CDATA[
   var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
    try {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0) {
            $('.post--' + id).toggle(0, function() {
            if( $(this).is(":visible") ) {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            } else {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    } catch(e) { }

   return false;
};

//]]>
</script>

<div class="fil_ariane_nouveau_sujet" style="height:80px;">
  <div class="fil_ariane_v"><a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a> {NAV_CAT_DESC}</div>
  
  <div class="nouveau_sujet_v" style="position:absolute;right:100px;">
    <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="ion-{I_POST_NEW_TOPIC} button1">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="ion-{I_POST_REPLY_TOPIC} button1">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
    <span style="color:var(--couleur-texte);border-radius:6px;padding:5px;width:auto;position:relative;top:50px;left:-215px;">{S_WATCH_TOPIC}</span>
  </div>
  </div>

<!-- BEGIN topicpagination -->
      <div class="pagination">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->
  
  <div class="titre_sujet_a"><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></div>

{POLL_DISPLAY}

<!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_COUNT}">
         <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
                  </div>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
      <div class="message_profil">
  <div class="block_gauche_mess">
  <div class="block_avatar_hover">
   {postrow.displayed.POSTER_AVATAR}<div class="hover_membre">
    <h2>Profil</h2>
    <!-- BEGIN profile_field -->
                          <div class="champ_profil">{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
    <!-- END profile_field --></div>
    
    <div class="block_pseudo">
      {postrow.displayed.POSTER_NAME} <span>{postrow.displayed.POSTER_RANK_NEW}</span>
    </div>
    
     <div class="block_contact">
    {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} <!-- BEGIN contact_field -->
                      {postrow.displayed.contact_field.CONTENT}
                  <!-- END contact_field -->
    </div>
    
    
<div class="elt-declencheur">
  Afficher le profil
</div>
    <div class="afficher-masquer infos-supp" style="display: none; height:125px;overflow:auto!important;background:var(--fond-blocs);padding:10px;margin-top:5px;border-radius:6px;border:1px solid var(--couleur-tertiaire);object-fit:cover;"></div>
    </div>    </div>
    <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -70px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                  <div class="block_message_a">
      <div class="nom_sujet_boutons">
        <div class="boutons_sujet">
         <ul class="forum_actions">
               
               <li class="btn-quote">
                  <a href="{postrow.displayed.QUOTE_URL}">citer</a>
               </li>
               <li class="btn-edit">
                  <a href="{postrow.displayed.EDIT_URL}">éditer</a>
               </li>
               <li class="btn-delete">
                  <a href="{postrow.displayed.DELETE_URL}">supprimer</a>
               </li>
           <li>| {postrow.displayed.POST_DATE_NEW}</li>
            </ul>
        </div>
        
        <div class="nom_sjt">
          <!-- BEGIN switch_likes_active -->
         <div class="fa_like_div">
            <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}"  data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}" style="background:var(--fond-blocs);color:var(--couleur-texte)">
               <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}
            </button>
            <!-- BEGIN switch_dislike_button -->
            <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}" style="background:var(--fond-blocs);color:var(--couleur-texte)">
               <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE}
            </button>
            <!-- END switch_dislike_button -->
            <!-- BEGIN switch_like_list -->
            {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}
            <!-- END switch_like_list -->
            <!-- BEGIN switch_dislike_list -->
            {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}
            <!-- END switch_dislike_list -->
         </div>
         <!-- END switch_likes_active -->
        </div>
      </div>
      
                    <div class="message_contenu">
    {postrow.displayed.MESSAGE}
         <!-- BEGIN switch_signature -->
         <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">
            {postrow.displayed.SIGNATURE_NEW}
         </div>
         <!-- END switch_signature -->
      </div>
    </div>
  </div>
   <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>
<div class="topic-actions bottom">
   
<div class="fil_ariane_nouveau_sujet" style="height:100px;">
  <div class="fil_ariane_v"><a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a> {NAV_CAT_DESC}</div>
  
  <div class="nouveau_sujet_v" style="position:absolute;right:100px;">
    <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow" {S_POST_NEW_TOPIC} title="{T_POST_NEW_TOPIC}" class="ion-{I_POST_NEW_TOPIC} button1">{L_POST_NEW_TOPIC}</a>
      <!-- END switch_user_authpost -->
      <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}" {S_POST_REPLY_TOPIC} title="{T_POST_REPLY_TOPIC}" class="ion-{I_POST_REPLY_TOPIC} button1">{L_POST_REPLY_TOPIC}</a>
      <!-- END switch_user_authreply -->
    <span style="color:var(--couleur-texte);border-radius:6px;padding:5px;width:auto;position:relative;top:50px;left:-215px;">{S_WATCH_TOPIC}</span>
  </div>
  </div>
  <!-- BEGIN topicpagination -->
      <div class="pagination" style="margin-bottom:10px;">
         {PAGINATION}
      </div>
   <!-- END topicpagination -->
      

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
   <div class="h3">{L_FORUM_RULES}</div>
   <div class="clear"></div>
   <table class="postbody">
      <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules content">
            {RULE_MSG}
         </td>
      </tr>
   </table>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
   <a name="quickreply"></a>
   {QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
   <fieldset class="quickmod">
      <input type="hidden" name="t" value="{TOPIC_ID}" />

      <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
      <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
      <label>{L_MOD_TOOLS}:</label>
      {S_SELECT_MOD}
      <input class="button2" type="submit" value="{L_GO}" />
   </fieldset>
</form>

<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
   $('pre, code').each(function(i, block) {
      hljs.highlightBlock(block);
   });

   $('.post').each(function() {
      if (!$(this).find('.postprofile-avatar').html().length) {
         $(this).find('.postprofile-rank').css('border-bottom', 'none');
         $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
      }
   });
});
</script>
  
  <style>/**************** PROFIL ET MESSAGES ********************/

.fil_ariane_nouveau_sujet {
    width: 950px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    margin: auto;
    font: 13px var(--police-texte);
    color: var(--fond-blocs);
    line-height: 25px;
    border-radius: 6px;
}

.fil_ariane_v {padding-top:9px;width:600px;}

.fil_ariane_v a {
  font-weight: bold;
  color: var(--couleur-tertiaire);
  text-decoration: none;
}

.nouveau_sujet_v a {
  background: var(--couleur-degrade2);
  color: var(--fond-blocs)!important;
  text-decoration: none;
  padding: 2px 10px;
  display: inline-block;
  margin: 0 0 0 4px;
  box-shadow: none !important;
  border-radius: 6px;
  margin-top:10px;
}

.pagination_arte {
  width: 950px;
  margin: auto;
  text-align: right;
  font: 14px var(--police-texte);
  color: var(--couleur-tertiaire);
  border-radius: 6px;
}


.pagination_arte a {
  color: var(--couleur-texte);
  text-decoration: none;
  border-radius: 6px;
}

.titre_sujet_a {
  width: 950px;
  height: 40px;
  background: var(--couleur-degrade2);
  margin: 5px auto;
  margin-top: 30px;
  font: 14px var(--police-texte);
  text-transform: uppercase;
  box-sizing: border-box;
  padding: 11px 30px;
  border-radius: 6px;
  
}

.titre_sujet_a a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

.message_profil {
  width: 950px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 10px;
  min-height : 500px;
}

.block_gauche_mess {
  width: 200px;
  font: 10px var(--police-texte);
}

.block_avatar_hover > img {
  width: 200px;
  height: 320px;
  object-fit: cover;
  border-radius: 6px;
}


.block_avatar_hover {
  width: 210px;
    height: 330px;
  position: relative;
  border: 5px solid var(--fond-blocs);
  outline: 0px solid rgba(0,0,0,0.2);
  outline-offset: -1px;
  border-radius: 6px;

}

.hover_membre {
  width: 200px;
  height: 320px;
  background: var(--fond-blocs);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 20px;
  visibility: hidden;
    opacity: 0;
  transition: all 1s;
  overflow:auto;
}

.block_avatar_hover:hover .hover_membre{visibility:visible;opacity:1;}

.hover_membre .block_joueur .champ_profil:nth-of-type(1) span, .hover_membre .champ_profil:nth-of-type(7) span, .hover_membre .champ_profil:nth-of-type(8) span, .champ_profil:nth-of-type(12) span{
  display: none;
}

.hover_membre .champ_profil:nth-of-type(1) span {display: none}    
    
.champ_profil {
  font-size:12px;
    color:var(--couleur-texte);
}

.hover_membre .champ_profil:nth-of-type(1) img {
  width: 80px;
  height: 80px;
  display: block;
  margin: auto;
  object-fit: cover;
  border: 4px solid var(--fond-blocs);
  outline: 0px solid rgba(0,0,0,0.2);
  outline-offset: -1px;
  border-radius: 6px;
  margin-top:30px;
}

.hover_membre > h2 {
  font: 13px var(--police-texte);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--couleur-tertiaire)!important;
  position: relative;
  position: absolute;
}

.hover_membre > h2:after {
  width: 100px;
  height: 5px;
  background: var(--couleur-degrade2);
  content: " ";
  position: absolute;
  bottom: -10px;
  left: 0;
}

.champ_profil span {
  text-transform: uppercase;
  color:var(--couleur-tertiaire)!important;
  font-weight:bold;
}

.hover_membre .champ_profil:nth-of-type(7) img{
  width: 40px;
  height: 40px;
  object-fit: cover;
  margin: 0 3px;
  border: 3px solid var(--fond-blocs);
  outline: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  }

.hover_membre .champ_profil:nth-of-type(7) {
  margin-top: 10px;
  text-align: center;
}

.hover_membre .champ_profil:nth-of-type(8) {
  font: 10px var(--police-texte);
  font-style: oblique;
  text-align: center;
  margin-top: 15px;
  height: 45px;
  overflow: auto;
}

.block_pseudo {
  width: 212px;
  height: 38px;
  background: var(--fond-blocs);
  margin-left: -6px;
  border: 0px solid rgba(0,0,0,0.2);
  margin-top: 10px;
  font: 12px var(--police-texte);
  font-weight: 900;
  padding: 5px 10px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: var(--couleur-tertiaire);
  border-radius: 6px;
  
}

.block_pseudo span {
  display: block;
  font-weight: 600;
  font-size: 12px;
      text-align: center;
}

.block_contact {
   width: 212px;
  height: 27px;
  background: var(--fond-blocs);
  margin-left: -6px;
  border: 0px solid rgba(0,0,0,0.2);
  margin-top: 5px;
  font: 10px var(--police-texte);
  font-weight: 900;
  padding: 5px 10px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: var(--couleur-tertiaire);
  text-align: center;
  border-radius: 6px;
}

.block_contact img {
  width: 15px;
  height: 15px;
  object-fit: cover;
  border-radius: 6px;
}

.block_contact a {
  margin: 0 4px;
}

.elt-declencheur {
   width: 212px;
  height: 27px;
  background: var(--couleur-tertiaire);
  margin-left: -6px;
  border: 0px solid rgba(0,0,0,0.2);
  margin-top: 5px;
  font: 10px var(--fond-blocs);
  font-weight: 900;
  padding: 7px 10px;
  box-sizing: border-box;
  text-transform: uppercase;
  color: var(--fond-blocs);
  text-align: center;
  border-radius: 6px;
}

.afficher-masquer img{
  object-fit:cover;
}

.block_message_a {
  width: 730px;
  border: 0px solid rgba(0,0,0,0.2);
  background: var(--fond-blocs);
  border-radius: 6px;
}

.nom_sujet_boutons {
  width: 100%;
  height: 30px;
  background: var(--couleur-tertiaire);
  display: flex;
  justify-content: space-between;
  font: 12px var(--police-texte);
  color: var(--fond-blocs);
  box-sizing: border-box;
  padding: 6px;
  border-radius: 6px;
}

.nom_sujet_boutons a {
  color:var(--fond-blocs);
  font-size:12px;
}

.btn-delete a:hover {
  background:none;
}

.btn-quote a:hover {
  background:none;
}

.btn-edit a:hover {
  background:none;
}

.forum_actions {
  margin: 0;
  padding: 0;
  display: flex;
  width: auto;
  list-style-type: none;
  border-radius: 6px;
}

.forum_actions li {
  padding: 0;
  margin: 0 4px;
  }
.forum_actions a:hover {
  color: var(--fond-blocs) !important;}
.fa_like_div{
  margin-top:-14px;
  margin-right:-200px;
}
.fa_like {
  color: var(--couleur-texte);
  background:var(--fond-blocs);
}
 .fa_dislike {
  color: var(--couleur-texte);
  background:var(--fond-blocs);
}
.switch_likes_active {
  background:var(--couleur-texte);
}
 .rep-button, .rep-button:active, .rep-button:focus {
    border-radius: 4px;
    font-family: Trebuchet MS;
    font-size: 11.4px;
    font-weight: 700;
    text-transform: initial;
}
.message_contenu {
  min-height: 550px;
  box-sizing: border-box;
  padding: 20px;
  font: 14px var(--police-texte);
  text-align: justify;
  color: var(--couleur-texte);
}
.topic-actions.bottom .topic-actions-buttons {
    margin: 0 auto;
    display: flex;
    width: 950px;
    justify-content: flex-end;
  gap: 10px;
    line-height: 25px;
}
.signature_div {
    border-top: 0px solid rgba(0,0,0,0.2);
    width: 80%;
    margin: 20px auto 0;
    border-radius: 6px;
}
.signature_div > div  {
    margin-top: -15px;
}
.button1:active, .button1:hover, .button1:link, .button1:visited, .button2:active, .button2:hover, .button2:link, .button2:visited, .button:active, .button:hover, .button:link, .button:visited, input[type="submit"]:active, input[type="submit"]:hover, input[type="submit"]:link, input[type="submit"]:visited {
  box-shadow: none;}
    #preview .postbody {width:100%;}</style>

Merci d'avance

[Yunie16]

Bonjour, je viens uper ma demande

[Toryudo]

Bonjour !

A partir du moment où vous mettez un position "absolute" sur un élément, vous placez cet élément de façon absolue par rapport au premier parent en position relative trouvé. Sur votre forum, le premier en position relative trouvé, je pense que c'est le dernier parent, c'est-à-dire le body lui-même : les boutons se placent donc par rapport au body, donc par rapport à l'écran.

Puisque .nouveau_sujet_v est en position absolute, je vous conseille de le placer par rapport à son parent direct .fil_ariane_nouveau_sujet :

Code:

.fil_ariane_nouveau_sujet {
  position: relative;
}

Ainsi, il sera bien positionné par rapport à cet élément, lui-même bien positionné dans le cadre du forum !

[Yunie16]

Bonjour !

Merci de votre réponse.
J'avais déjà testé de mettre en relative, et je viens de réessayer au cas où, mais ça part beaucoup trop à gauche du coup, comme ceci :

Spoiler:

(je n'ai pas cherché à ajuster la position du bouton de surveillance donc lui c'est "normal" qu'il parte en cacahuète comme ça)

[Toryudo]

Une fois que le CSS position a été ajouté, vous pouvez remplacer le right: 100px; par un right: 0px; sur le .nouveau_sujet_v pour ne plus que les boutons soient décalés de 100px par rapport à la droite

Pour le surveiller, ça devient plus simple aussi je pense !
Un right: 0px aussi devrait faire l'affaire, vous pourriez même envisager de mettre un <br> juste avant dans le Template pour ne pas avoir à ajouter un top, ce serait peut-être plus simple.

[Yunie16]

Ah mince j'avais compris qu'il fallait juste le relative pour que ça s'aligne, et que si je jouais avec la position ça ferait de nouveau par rapport à mon écran, désolée ^^'

Du coup j'ai réussi à aligner comme je voulais, merci !
Seulement, quand un sujet est surveillé et que le bouton devient "arrêter de surveiller", il se réduit en longueur et au lieu de rester collé à droite se décale un peu sur la gauche. J'ai tenté de palier ça en mettant une width au bouton, mais ça n'a pas l'air de fonctionner, même avec la fonction "!important", il y aurait une astuce pour ça ?

[Lixyr]

Bonsoir,

Alors, on va faire un peu de ménage. Dans votre template, cherchez ceci :

<span style="color:var(--couleur-texte);border-radius:6px;padding:5px;width:auto;position:relative;top:50px;left:-215px;">{S_WATCH_TOPIC}</span>

Et remplacez par :

Code:

<span class="ion-watch button1">{S_WATCH_TOPIC}</span>

(Si jamais ça gêne, vous pouvez mettre

Code:

<span class="ion-watch">{S_WATCH_TOPIC}</span>

Puis rajoutez dans votre CSS :

Code:

.ion-watch {
  color:var(--couleur-texte);
  border-radius:6px;
  padding:5px;
  width: 300px !important;
  position:relative;
  top:50px;
  left:-215px;
}

[Yunie16]

Bonjour ! (fin, bonsoir...)

Merci de votre intervention !
Je viens d'essayer, en remettant les petites modifs suite aux réponses de Toryudo (donc sans le top et avec un right adapté), mais le problème reste le même, le width ne veut pas prendre... J'avais aussi essayé avec !important mais ça n'a pas l'air de vouloir fonctionner, ça donne ceci quand un sujet est surveillé :

Spoiler:

Et ceci quand il ne l'est pas :

Spoiler:

Je remets la dernière version du CSS du coup, en ayant utilisé simplement "ion-watch" parce que avec le button1 ça rajoutait un background énorme derrière :

Code:

.ion-watch {
  color:var(--couleur-texte);
  border-radius:6px;
  padding:5px;
  width: 300px !important;
  position:relative;
  right:-98px;
}

[Toryudo]

Bonjour !

Pour le coup, cet élément span .ion-watch devrait aussi être en position absolute et ne pas avoir de padding pour ne pas rajouter un décalage.
En changeant ça, on peut alors remettre un right:0px plus logique et intuitif (et pas besoin de width non plus) :

Code:

.ion-watch {
  color:var(--couleur-texte);
  border-radius:6px;
  position:absolute;
  right:0px;
}

[Yunie16]

Bonsoir !

Cette fois ça fonctionne, merci beaucoup **
Désolée pour ces chipoteries et vraiment merci pour votre temps !