Déplacer des item dans une card

Bonjour,

Je voudrais déplacer des item dans ma card mais je ne sais pas comment je doit procéder.
J’ai essayé avec les padding mais cela ne fonctionne pas.

image
Je voudrais resserrer le tout et aligner la ligne du bas avec celle du haut.

Merci de votre aide.

Hello, personne pour m’aider?
Je rajoute le code de la card, ça peu aider ^^

custom_card_apexcharts_water:
  variables:
    entity_1:
      entity_id:
      icon: "[[[ return entity.attributes.icon ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'green'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_2:
      entity_id:
      icon: "[[[ return entity.attributes.icon  ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'green'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_3:
      entity_id:
      icon: "[[[ return entity.attributes.icon  ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red','green'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_4:
      entity_id:
      icon: "[[[ return entity.attributes.icon  ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red','green'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_5:
      entity_id:
      icon: "[[[ return entity.attributes.icon  ]]]"
      name: "[[[ return entity.attributes.friendly_name ]]]"
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red','green'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
  color: "auto"
  variable: "spin"
  spin: false
  show_name: false
  show_state: false
  show_label: false
  show_icon: false
  show_last_changed: true
  show_entity_picture: false
  styles:
    grid:
      - grid-template-areas: "'item1' 'item2' 'radial'"
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content min-content
    card:
      - border-radius: "var(--border-radius)"
      #- padding: "10px"
      #- height: 400px
  custom_fields:
    item1:
      card:
        type: custom:button-card
        template: list_3_items
        custom_fields:
            item1:
              card:
                type: "custom:button-card"
                entity: "[[[ return variables.entity_1.entity_id ]]]"
                name: "[[[ return variables.entity_1.name ]]]"
                template:
                  - "icon_info_bg"
                variables:
                  ulm_card_generic_swap_name: "[[[ return variables.entity_1.name ]]]"
                  ulm_card_generic_swap_icon: "[[[ return variables.entity_1.icon ]]]"
                styles:
                  icon:
                    - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]"
                  img_cell:
                    - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]"
                  card:
                    - box-shadow: "none"
                    - border-radius: "none"
                    - padding-top: "1px"
                    - padding-bottom: "5px"
                    - padding-right: "1px"
                    - padding-left: "5px"
                label: |
                  [[[ 
                          return states[variables.entity_1.entity_id].state + " L";
                  ]]]
            item2:
              card:
                type: "custom:button-card"
                entity: "[[[ return variables.entity_2.entity_id ]]]"
                name: "[[[ return variables.entity_2.name ]]]"
                template:
                  - "icon_info_bg"
                variables:
                  ulm_card_generic_swap_name: "[[[ return variables.entity_2.name ]]]"
                  ulm_card_generic_swap_icon: "[[[ return variables.entity_2.icon ]]]"
                styles:
                  icon:
                    - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]"
                  img_cell:
                    - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]"
                  card:
                    - box-shadow: "none"
                    - border-radius: "none"
                    - padding-top: "1px"
                    - padding-bottom: "5px"
                    - padding-right: "1px"
                    - padding-left: "1px"
                label: |
                  [[[ 
                          return states[variables.entity_2.entity_id].state + " m3";
                  ]]]
            item3:
              card:
                type: "custom:button-card"
                entity: "[[[ return variables.entity_3.entity_id ]]]"
                name: "[[[ return variables.entity_3.name ]]]"
                template:
                  - "icon_info_bg"
                variables:
                  ulm_card_generic_swap_name: "[[[ return variables.entity_3.name ]]]"
                  ulm_card_generic_swap_icon: "[[[ return variables.entity_3.icon ]]]"
                styles:
                  icon:
                    - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]"
                  img_cell:
                    - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]"
                  card:
                    - box-shadow: "none"
                    - border-radius: "none"
                    - padding-top: "1px"
                    - padding-bottom: "5px"
                    - padding-right: "1px"
                    - padding-left: "1px"
                label: |
                  [[[ 
                          return states[variables.entity_3.entity_id].state + " m3";
                  ]]]
    item2:
      card:
        type: custom:button-card
        template: list_2_items
        custom_fields:
            item1:
              card:
                type: "custom:button-card"
                entity: "[[[ return variables.entity_4.entity_id ]]]"
                name: "[[[ return variables.entity_4.name ]]]"
                template:
                  - "icon_info_bg"
                variables:
                  ulm_card_generic_swap_name: "[[[ return variables.entity_4.name ]]]"
                  ulm_card_generic_swap_icon: "[[[ return variables.entity_4.icon ]]]"
                styles:
                  icon:
                    - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]"
                  img_cell:
                    - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]"
                  card:
                    - box-shadow: "none"
                    - border-radius: "none"
                    - padding-top: "1px"
                    - padding-bottom: "5px"
                    - padding-right: "1px"
                    - padding-left: "5px"
                label: |
                  [[[ 
                          return states[variables.entity_4.entity_id].state + " m3";
                  ]]]
            item2:
              card:
                type: "custom:button-card"
                tap_action:
                  action: "more-info"
                entity: "[[[ return variables.entity_5.entity_id ]]]"
                name: "[[[ return variables.entity_5.name ]]]"
                template:
                  - "icon_info_bg"
                variables:
                  ulm_card_generic_swap_name: "[[[ return variables.entity_5.name ]]]"
                  ulm_card_generic_swap_icon: "[[[ return variables.entity_5.icon ]]]"
                styles:
                  icon:
                    - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]"
                  img_cell:
                    - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]"
                  card:
                    - box-shadow: "none"
                    - border-radius: "none"
                    - padding-top: "1px"
                    - padding-bottom: "5px"
                    - padding-right: "1px"
                    - padding-left: "1px"
                label: |
                  [[[ 
                          return "Dans " + states['sensor.adou_filtre_time_rest'].state + " jours " + states['sensor.adou_filtre_time'].state;
                  ]]]

Rajoute un sixième Button invisible, après le cinquième . ca callera le cinquième Button au dessous du deuxième.
Ou utilise la carte grid et met sur trois colonne.

  type: grid
  columns: 3
  square: false
  cards:
    - type: custom:button-card

Tu peu aussi jouer avec card_mod.

Et pour réduire les écarts entre les bouton sur la ligne du haut?

tu peu essayer avec margin ou margin-left dans button-card

styles:
  card:
    - margin: 0 # même des valeurs negative -10px
    - margin-left: 0

comment je le met invisible?

En fait c’est que sur l’affichage de l’iphone le dernier bouton n’est pas affiché completement alors qui il y a de la place si on décale sur la gauche:

- type: 'custom:button-card'
  color_type: blank-card

merci.
il y a possibilité de mettre le label sur deux lignes?

tu peu ajouter <br/> poour aller a la ligne.

ex:

              label: |
                [[[ 
                  if (states['fan.mi_smart_standing_fan_2'].state == "on") return '<ha-icon icon="mdi:fan" style="width:15px; height: 15px; color: white;"></ha-icon> ' + states['fan.mi_smart_standing_fan_2'].attributes.percentage + '%' + '<br/><ha-icon icon="mdi:arrow-expand-horizontal" style="width:15px; height: 15px; color: yellow;"></ha-icon> ' + states['fan.mi_smart_standing_fan_2'].attributes.angle + '°' + '<br/><ha-icon icon="mdi:leaf" style="width:14px; height: 14px; color: green;"></ha-icon> ' + states['fan.mi_smart_standing_fan_2'].attributes.mode ;              
                ]]]

button a la ligne

tu peu regarder les exemples sur le github GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant , tu peu jouer avec le ratio .

aussi avec la taille de la carte :

      styles:
        card:
          - height: 60px
          - width: 60px

Tu peu essayer mushroom card GitHub - piitaya/lovelace-mushroom: Mushroom Cards - Build a beautiful dashboard easily 🍄, ca ressemble beaucoup a t’es button.
regarde c’est carte lovelace-mushroom/entity.md at main · piitaya/lovelace-mushroom · GitHub, ca pourrais mieux s’afficher avec.

Merci pour les liens :slight_smile:
Le <br/> m’a résolu le problème:
image

La seconde ligne n’est pas aligné avec la première, pour j’ai pas d’espace.

1 « J'aime »

C’est pour ça que je te disait de rajouter un troisième button blank-card sur la deuxième ligne, après le button changer de filtre. Comme ça tu aura changer le filtre sous semaine.

Hello,
Je parlais de la deuxième ligne du label, on dirait qu’il y a un espace mais pourtant non.

Ok, j’avais pas compris ca. Tu doit avoir un espace avant <br/> ou après .

           label: |
             [[[ 
               return "Dans " + states['sensor.adou_filtre_time_rest'].state + " jours " + <br/>states['sensor.adou_filtre_time'].state;
             ]]]

tu peu tester aussi:

" jours " <br/>+ states['sensor.adou_filtre_time'].state;

ou

" jours "<br/>+ states['sensor.adou_filtre_time'].state;

ou

" jours " +<br/>states['sensor.adou_filtre_time'].state;
1 « J'aime »