Modifier les marges d'un horizontal-stack

Bonjour à tous,

Je cherche à modifier les marges gauche et droite d’un horizontal-stack. Voici mon YAML simplifié au maximun :

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: Automatique
          target:
            entity_id: input_select.pool_pump_preselection
        name: Automatique
        show_icon: true
        icon: 'mdi:calendar'
        show_state: false
        show_name: true
        hold_action:
          action: none
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: Marche forcée
          target:
            entity_id: input_select.pool_pump_preselection
        name: Marche forcée
        show_icon: true
        icon: 'mdi:engine'
        hold_action:
          action: none
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: 'Off'
          target:
            entity_id: input_select.pool_pump_preselection
        show_icon: true
        name: Arrêt
        icon: 'mdi:engine-off'
        hold_action:
          action: none
    style:
      hui-horizontal-stack-card:
        $: |
          #root {
            margin-left: 16px;
            margin-right: 16px;
          }

Je n’arrive pas à faire fonctionner mon style.

Dans la documentation (GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card) il est écrit :

There are some cards where card-mod just won’t work. Those cards often are not really cards at all, but change how other cards work. Examples include: conditional , entity-filter , horizontal-stack and vertical-stack as well as some custom cards, like layout-card , auto-entities and state-switch among others.

For those cases, a special mod-card is provided as a workaround:

Du coup je suis perdu, je ne sais pas si je peux modifier ou pas le style de ma pile horizontal et si oui, je ne sais comment.

Merci d’avance

J’en ai un peu parlé ici : https://forum.hacf.fr/t/carte-differentes-en-mode-portrait-paysage/4127/5?u=clemalex

Mais ta carte horizontale étant dans une carte verticale, tu devrais pouvoir attaquer dessus avec card-mod.

Je peux regarder ce soir si tu veux mais peux tu montrer sur une capture d’écran ce que tu souhaites diminuer/augmenter ?

Merci @Clemalex

J’ai regardé un peu ton lien, mais je vois pas trop comment ça peux m’aider à m’en sortir…

Voilà la présentation actuelle et j’aimerais que les deux cartes horizontale soient callées sur les trais vert soit 16 pixels de marge gauche et droite.

Screen

Voila mon YAML complet :

type: vertical-stack
cards:
  - type: markdown
    content: >-
      Le mode de filtration de la piscine est actuellement réglé sur
      **{{states('sensor.pool_pump')}}**. Sur quel mode de filtration doit être
      réglé la filtration ?
    style:
      .: |
        ha-card {
          box-shadow: none !important;
          text-align: justify;
        }
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: Automatique
          target:
            entity_id: input_select.pool_pump_preselection
        name: Automatique
        show_icon: true
        icon: 'mdi:calendar'
        show_state: false
        show_name: true
        hold_action:
          action: none
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: Marche forcée
          target:
            entity_id: input_select.pool_pump_preselection
        name: Marche forcée
        show_icon: true
        icon: 'mdi:engine'
        hold_action:
          action: none
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: 'Off'
          target:
            entity_id: input_select.pool_pump_preselection
        show_icon: true
        name: Arrêt
        icon: 'mdi:engine-off'
        hold_action:
          action: none
    style:
      hui-horizontal-stack-card:
        $: |
          #root {
            margin-left: 16px;
            margin-right: 16px;
          }
  - type: conditional
    conditions:
      - entity: input_select.pool_pump_preselection
        state: Marche forcée
    card:
      type: markdown
      content: Combien de temps la filtration doit être en marche forcée ?
      style:
        .: |
          ha-card {
            box-shadow: none !important;
            text-align: justify;
  - type: conditional
    conditions:
      - entity: input_select.pool_pump_preselection
        state: Marche forcée
    card:
      type: horizontal-stack
      cards:
        - type: button
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              option: 1 jour
            target:
              entity_id: input_select.pump_forced_duration_preselection
          name: 1 jour
          show_icon: false
          hold_action:
            action: none
        - type: button
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              option: 2 jours
            target:
              entity_id: input_select.pump_forced_duration_preselection
          name: 2 jours
          show_icon: false
          hold_action:
            action: none
        - type: button
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              option: 1 semaine
            target:
              entity_id: input_select.pump_forced_duration_preselection
          name: 1 semaine
          show_icon: false
          hold_action:
            action: none
  - type: 'custom:button-card'
    entity: input_select.pool_pump_preselection
    tap_action:
      action: call-service
      service: automation.trigger
      service_data:
        skip_condition: true
        entity_id: automation.piscine_changement_saison
    layout: icon_label
    show_label: true
    show_name: false
    color_type: card
    state:
      - value: Automatique
        icon: 'mdi:calendar'
        label: Valider le fonctionnement automatique
      - value: Marche forcée
        icon: 'mdi:engine'
        label: |
          [[[
            return 'Valider la marche forcée ' + states['input_select.pump_forced_duration_preselection'].state;
          ]]]
      - value: 'Off'
        icon: 'mdi:engine-off'
        label: Valider l'arrêt de la filtration
    styles:
      card:
        - margin: 0px 16px 16px 16px
        - width: calc(100% - 32px)
        - background-color: 'rgb(204, 0, 0)'
        - color: white
      grid:
        - grid-template-columns: 20% 1fr
      label:
        - justify-self: start
        - padding-left: 0px

Merci du temps que tu consacres à toutes les réponses.

A force de tester, de relire la doc, de retester, de chercher sur les forums, de relire la doc, etc… j’ai trouvé ce qu’il me manquait :

type: custom:mod-card
card:
  type: vertical-stack # for example
  ...
card_mod:
  style: |
    ha-card {
      ...
    }

J’ai pu réduite mes marges sur ma pile horizontale pour avoir un affichage parfait :

Popup

Et si ca peut aider certains, voici le YAML de la popup :

popup_cards:
  sensor.pool_pump:
	title: Mode de fonctionnement
	card:
	  type: vertical-stack
	  cards:
		- type: markdown
		  content: >-
			Le mode de filtration de la piscine est actuellement réglé sur
			**{{states('sensor.pool_pump')}}**. Sur quel mode doit être
			réglé la filtration ?
		  style:
			.: |
			  ha-card {
				box-shadow: none !important;
				text-align: justify;
			  }
		- type: 'custom:mod-card'
		  card:
			type: horizontal-stack
			cards:
			  - type: 'custom:button-card'
				entity: input_select.pool_pump_preselection
				icon: 'mdi:calendar'
				name: Automatique
				show_state: false
				color_type: card
				size: 25%
				tap_action:
				  action: call-service
				  service: input_select.select_option
				  service_data:
					option: Automatique
					entity_id: input_select.pool_pump_preselection
				state:
				  - value: Automatique
					color: 'rgb(253, 216, 53)'
				  - value: Marche forcée
					color: 'rgb(255, 255, 255)'
				  - value: 'Off'
					color: 'rgb(255, 255, 255)'
				styles:
				  name:
					- font-size: 14px
			  - type: 'custom:button-card'
				entity: input_select.pool_pump_preselection
				icon: 'mdi:engine'
				name: Marche forcée
				show_state: false
				color_type: card
				size: 25%
				tap_action:
				  action: call-service
				  service: input_select.select_option
				  service_data:
					option: Marche forcée
					entity_id: input_select.pool_pump_preselection
				state:
				  - value: Automatique
					color: 'rgb(255, 255, 255)'
				  - value: Marche forcée
					color: 'rgb(253, 216, 53)'
				  - value: 'Off'
					color: 'rgb(255, 255, 255)'
				styles:
				  name:
					- font-size: 14px
			  - type: 'custom:button-card'
				entity: input_select.pool_pump_preselection
				icon: 'mdi:engine-off'
				name: Eteint
				show_state: false
				color_type: card
				size: 25%
				tap_action:
				  action: call-service
				  service: input_select.select_option
				  service_data:
					option: 'Off'
					entity_id: input_select.pool_pump_preselection
				state:
				  - value: Automatique
					color: 'rgb(255, 255, 255)'
				  - value: Marche forcée
					color: 'rgb(255, 255, 255)'
				  - value: 'Off'
					color: 'rgb(253, 216, 53)'
				styles:
				  name:
					- font-size: 14px
		  card_mod:
			style: |
			  ha-card {
				margin-left: 16px;
				margin-right: 16px;
			  }
		- type: conditional
		  conditions:
			- entity: input_select.pool_pump_preselection
			  state: Marche forcée
		  card:
			type: markdown
			content: Quelle durée pour la marche forcée ?
			style:
			  .: |
				ha-card {
				  box-shadow: none !important;
				  text-align: justify;
		- type: conditional
		  conditions:
			- entity: input_select.pool_pump_preselection
			  state: Marche forcée
		  card:
			type: 'custom:mod-card'
			card:
			  type: horizontal-stack
			  cards:
				- type: 'custom:button-card'
				  entity: input_select.pump_forced_duration_preselection
				  name: 1 jour
				  show_state: false
				  show_icon: false
				  color_type: card
				  size: 25%
				  tap_action:
					action: call-service
					service: input_select.select_option
					service_data:
					  option: 1 jour
					  entity_id: input_select.pump_forced_duration_preselection
				  state:
					- value: 1 jour
					  color: 'rgb(253, 216, 53)'
					- value: 2 jours
					  color: 'rgb(255, 255, 255)'
					- value: 1 semaine
					  color: 'rgb(255, 255, 255)'
				  styles:
					name:
					  - font-size: 14px
				- type: 'custom:button-card'
				  entity: input_select.pump_forced_duration_preselection
				  name: 2 jours
				  show_state: false
				  show_icon: false
				  color_type: card
				  size: 25%
				  tap_action:
					action: call-service
					service: input_select.select_option
					service_data:
					  option: 2 jours
					  entity_id: input_select.pump_forced_duration_preselection
				  state:
					- value: 1 jour
					  color: 'rgb(255, 255, 255)'
					- value: 2 jours
					  color: 'rgb(253, 216, 53)'
					- value: 1 semaine
					  color: 'rgb(255, 255, 255)'
				  styles:
					name:
					  - font-size: 14px
				- type: 'custom:button-card'
				  entity: input_select.pump_forced_duration_preselection
				  name: 1 semaine
				  show_state: false
				  show_icon: false
				  color_type: card
				  size: 25%
				  tap_action:
					action: call-service
					service: input_select.select_option
					service_data:
					  option: 1 semaine
					  entity_id: input_select.pump_forced_duration_preselection
				  state:
					- value: 1 jour
					  color: 'rgb(255, 255, 255)'
					- value: 2 jours
					  color: 'rgb(255, 255, 255)'
					- value: 1 semaine
					  color: 'rgb(253, 216, 53)'
				  styles:
					name:
					  - font-size: 14px
			card_mod:
			  style: |
				ha-card {
				  margin-left: 16px;
				  margin-right: 16px;
				}
		- type: 'custom:button-card'
		  entity: input_select.pool_pump_preselection
		  tap_action:
			action: call-service
			service: automation.trigger
			service_data:
			  skip_condition: true
			  entity_id: automation.piscine_changement_saison
		  layout: icon_label
		  show_label: true
		  show_name: false
		  color_type: card
		  state:
			- value: Automatique
			  icon: 'mdi:calendar'
			  label: Valider le mode automatique
			- value: Marche forcée
			  icon: 'mdi:engine'
			  label: |
				[[[
				  return 'Valider la marche forcée ' + states['input_select.pump_forced_duration_preselection'].state;
				]]]
			- value: 'Off'
			  icon: 'mdi:engine-off'
			  label: Valider l'arrêt de la filtration
		  styles:
			card:
			  - margin: 30px 16px 16px 16px
			  - width: calc(100% - 32px)
			  - background-color: 'rgb(204, 0, 0)'
			  - color: white
			grid:
			  - grid-template-columns: 20% 1fr
			label:
			  - justify-self: start
			  - padding-left: 0px
	style:
	  $: |
		.mdc-dialog {
		  backdrop-filter: blur(10px) !important;
		  -webkit-backdrop-filter: blur(10px) !important;
		}
	  .: |
		mwc-icon-button ha-icon {
		  font-size: 0px;
		}
		app-toolbar {
		  color: var(--primary-text-color) !important;
		  background-color: var(--primary-background-color) !important;
		  border-bottom: 1px solid var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)) !important;
		}
2 « J'aime »

Merci pour le partage ! Le résultat rend bien.
Par contre popup cards est deprecated. Vas tu changer pour browser_mod ou préfères tu ce composant ?

Je n’ai pas popup-card d’installer mais bien browser_mod. J’utilise le remplacement de la popup more info comme indiqué dans la doc ci-dessous :

Vu, merci. Je n’utilise pas encore et j’avais juste fait quelques tests avec le service: browser_mod.popup. C’est top, même si les « forks » très poussés de Thomas Loven m’inquiètent et que la prudence imposerait de les utiliser avec parcimonie pour assurer la pérennité de nos implémentations.

Mon but est d’utiliser un minimum d’extension pour stabiliser au max HA !!! Mais browser_mod et card-mod me semblent indispensables :wink:

1 « J'aime »

au final, tu as compris :wink: (c’est la méthode que vers laquelle je t’orientais si tu ne pouvais pas attaquer la carte native :+1: