Widget PimpMyJeedom/shutterslider

Bonjour,
J’utilise le plugin de @Salvialf pour afficher et controler l’état de mes volets et j’ai aussi décidé d’ajouter les boutons FERMER/OUVRIR sur la tuile de mon volet
image
Comment faire pour que l’image du volet ne vienne pas rogner sur les boutons comme on peut le voir sur le screen de ma tuile? En gros , comment contrôler spécifiquement l’espace laissé sous l’image du volet?

Hello,

Tu as utilisé un tableau ?

J’ai essayé rapidement mais sans succès. Mais la bonne démarche est elle de passer par un tableau ou bien plutot par le css?
Cela m’étonne quand même que par défaut les divs se chevauchent…

Il y a pas de meilleure démarche.
Jouer avec les tableaux et/ou les sauts de ligne avant/après c’est 2 solutions simples si on veut pas prendre la tête avec les CSS.

Bonjour,

Pas testé avec le plugin Pimp-my-jeedom et ne sais pas si cela correspondra a ce que tu veux, mais moi sur un virtuel avec un widget v4 j’ai réussi à séparer mes bouton en insérant il ligne vide dans mon virtuel, ligne dont je n’affiche pas le nom (roue cranté, affichage, je décoche afficher le nom) ce qui donne cela:
Capture

Hello,

Tu as essayé ça ?
image
C’est plus simple/propre qu’une commande non ??

Pas mal l’astuce @iPapy!
Par ailleurs, tu utilises quel widget pour tes boutons? le rendu avec les ombres est pas mal!

@naboleo, oui j’ai essayé et pas d’effet… j’ai même essayé le retour à la ligne après le widget du volet et simultanément un retour à la ligne avant le widget bouton… et pas de résultat…

J’utilise le code suivant fait par @nak, que je remercie au passage, c’est un widget code action/défaut

<!--
  Widget Bouton NAK
par NAK le04:07:2020
 -->
<div style="margin-top:5px;" class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="other" 
     data-template="default" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" 
     data-eqLogic_id="#eqLogic_id#">
  <div class="content-xs">
    <a class="action" 
       style="border-radius: 2px;
			background: linear-gradient(315deg, #d4d4d4, #fbfbfb);
			box-shadow:  -2px -2px 5px #5e5e5e, 
             2px 2px 5px #ffffff;
              margin:5px;line-height:25px; padding : 5px 10px 5px 10px; 
              
              text-align:center;">#name_display#</a>
  </div>
  <script>
    $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
      jeedom.cmd.execute({id: '#id#'});
    });
    if ($('.cmd[data-cmd_uid=#uid#]').last().prev().data('subtype') 
        != undefined && $('.cmd[data-cmd_id=#id#]').last().prev().data('subtype') != 'other'
    && $('.cmd[data-cmd_uid=#uid#]').last().prev().css('display') != 'block') {
      $('.cmd[data-cmd_uid=#uid#]').last().prepend('<br/>');
    }
    if("#name#" != '#name_display#'){
      $('.cmd[data-cmd_uid=#uid#]:last .action').attr('title',"#name#")
    }
  </script>
</div>
1 « J'aime »

Merci @iPapy!
Pour info, j’ai utilisé le widget que tu viens de me fournir et j’ai modifié le line-height à 50 px dans le code…
Résultat:
image

1 « J'aime »

Content que tu ai trouvé une solution qui te convienne :wink: :+1:

@iPapy @nak
Merci aux 2, j’ai repiqué le code pour les boutons, rendu très sympa. Y’a plein de trésors méconnus (de moi)

1 « J'aime »

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.