Card Mod Removed

[duczz]

When i add a title card in your Integration in my example the last (on bottom) card_mod will be removed, all other card_mods are still existing. (normally the entities should be moved to the top, see screenshot first card) im tried to copy the complet code with extander card, but the global code editor is greyed out, when im using a title card, maybe you can fix this too if this is an integration problem? i hope the problem is understandable :)

Edit: the Code works in a normal card, so the code should be fine

Screen:

Title-Code:

mode: vertical
card_mod:
  style: |
    ha-card {
      border: none;
    }
cards:
  - type: custom:simple-thermostat
    entity: climate.wohnzimmer_klimaanlage
    header:
      name: Wohnzimmer
    layout:
      step: row
      mode:
        headings: false
        icons: true
        names: false
    hide:
      state: true
    control:
      fan:
        auto:
          icon: mdi:fan-auto
        min:
          icon: mdi:fan
        low:
          icon: mdi:fan-speed-1
        medium:
          icon: mdi:fan-speed-2
        high:
          icon: mdi:fan-speed-3
        max:
          icon: mdi:fan-plus
      hvac: true
    version: 3
    sensors:
      - entity: sensor.penthouse_temperature_feels_like
        id: temperature
        label: 'Außen:'
        template: '{{state.text|formatNumber}}{{unit_of_measurement}}'
      - entity: sensor.thermal_comfort_wohnzimmer_hitzeindex
        id: temperature
        label: 'Innen:'
        template: '{{state.text|formatNumber}}{{unit_of_measurement}}'
      - id: state
        label: 'Aktion:'
  - type: entities
    entities:
      - entity: input_boolean.kuehlperiode
        name: ' '
        icon: none
        show_state: false
        state_color: true
        tap_action:
          action: none
        type: custom:multiple-entity-row
        entities:
          - entity: automation.advanced_climate_control_wohnzimmer
            name: Automatik
            toggle: true
            styles:
              width: 85px
          - entity: input_boolean.kuehlperiode
            name: Kühlperiode
            toggle: true
            styles:
              text-align: right
    card_mod:
      style: |
        ha-card {
          margin-top: -273px;
          border: none;
        }
        .card-content {
          padding: 8px !important;
        }

[MelleD]

I see no expander card in your example.

Iam using card mod with title card without any issue. So I guess your card mod with expander card is on the wrong position.

So please add a MRE https://en.m.wikipedia.org/wiki/Minimal_reproducible_example

[duczz]

Hä, on the Screenshot second Card? Nope, Card Mod is on the right position because in the normal Card it works, copy paste.

I think maybe it has problems with multiple types?

Mre works

[MelleD]

A screenshot is not a MRE. Please copy the whole code with the expander card.

In your yaml code is NO expander card!!! And off course the css selector can be changed and you have to adapt it for the expander card, because it's nested, but without example hard to say

[duczz]

Im written on top, that i cant Copy the complete Code because the Code Button greyed Out when im add a title Card

How shut i do this than

[MelleD]

With normal yaml code without editor

[duczz]

i found out now, that when im adding the card_mod via RAW editor it works, but will be removed in editor mode.

below the raw code with the card_mod, which working when you copy it in raw mode. the problem code was

                 card_mod:
                    style: |
                      ha-card {
                        margin-top: -273px;
                        border: none;
                      }
                      .card-content {
                        padding: 8px !important;
                      }

          - type: custom:expander-card
            gap: 0.0em
            expanded-gap: 0.6em
            padding: 0.0em
            clear: false
            title: Erweiterte Einstellungen
            overlay-margin: 0.0em
            child-padding: 0.0em
            child-margin-top: 0.0em
            button-background: transparent
            expander-card-background: transparent
            expander-card-background-expanded: '#2a2a2a'
            header-color: var(--primary-text-color,#fff)
            arrow-color: 'var(--paper-item-icon-color, #aaa)'
            expander-card-display: block
            title-card-clickable: false
            title-card-button-overlay: true
            cards:
              - type: entities
                entities:
                  - entity: input_boolean.heizperiode
                    name: Heizperiode
                    icon: mdi:thermostat-box-auto
                    show_state: false
                    state_color: true
                    tap_action:
                      action: none
                    type: custom:multiple-entity-row
                    entities:
                      - entity: automation.advanced_heating_control_wohnzimmer
                        name: Automatik
                        toggle: true
                        styles:
                          width: 85px
                      - entity: input_boolean.heizperiode
                        name: Heizperiode
                        toggle: true
                  - type: custom:mushroom-select-card
                    entity: input_select.advanced_heating_control_scheduler
                    name: Scheduler
                    icon: mdi:calendar-month-outline
                    layout: horizontal
                    secondary_info: none
                    card_mod:
                      style: |
                        ha-card {
                          --ha-card-border-width: 0px;
                          --card-primary-font-weight: normal;
                          padding: 0px !important;
                        }
                        mushroom-shape-icon {
                          --shape-color: none !important;
                          --icon-color: #44739e !important;
                        }
                  - entity: >-
                      input_number.advanced_heating_control_wohnzimmer_comfort_temperatur
                    name: Automatik
                    card_mod:
                      style: |
                        hui-generic-entity-row {
                          padding-top: 8px;
                        }
                  - entity: sun.sun
                    name: Modus
                    icon: mdi:auto-mode
                    show_state: false
                    tap_action:
                      action: none
                    type: custom:multiple-entity-row
                    entities:
                      - entity: >-
                          input_boolean.advanced_heating_control_wohnzimmer_guest_mode
                        name: Gast
                        toggle: true
                        styles:
                          width: 100px
                      - entity: >-
                          input_boolean.advanced_heating_control_wohnzimmer_party_mode
                        name: Party
                        toggle: true
                  - entity: climate.wohnzimmer_comet_dect
                    name: Comet DECT *Manuell*
                state_color: true
                show_header_toggle: false
                card_mod:
                  style: |
                    .card-content div {
                      padding: 0px;
                    }
                    .card-content {
                      padding: 8px !important;
                    }
            title-card:
              type: custom:stack-in-card
              mode: vertical
              card_mod:
                style: |
                  ha-card {
                    border: none;
                  }
              cards:
                - type: custom:simple-thermostat
                  entity: climate.wohnzimmer_klimaanlage
                  header:
                    name: extander card
                  layout:
                    step: row
                    mode:
                      headings: false
                      icons: true
                      names: false
                  hide:
                    state: true
                  control:
                    fan:
                      auto:
                        icon: mdi:fan-auto
                      min:
                        icon: mdi:fan
                      low:
                        icon: mdi:fan-speed-1
                      medium:
                        icon: mdi:fan-speed-2
                      high:
                        icon: mdi:fan-speed-3
                      max:
                        icon: mdi:fan-plus
                    hvac: true
                  version: 3
                  sensors:
                    - entity: sensor.penthouse_temperature_feels_like
                      id: temperature
                      label: 'Außen:'
                      template: '{{state.text|formatNumber}}{{unit_of_measurement}}'
                    - entity: sensor.thermal_comfort_wohnzimmer_hitzeindex
                      id: temperature
                      label: 'Innen:'
                      template: '{{state.text|formatNumber}}{{unit_of_measurement}}'
                    - id: state
                      label: 'Aktion:'
                - type: entities
                  entities:
                    - entity: input_boolean.kuehlperiode
                      name: ' '
                      icon: none
                      show_state: false
                      state_color: true
                      tap_action:
                        action: none
                      type: custom:multiple-entity-row
                      entities:
                        - entity: automation.advanced_climate_control_wohnzimmer
                          name: Automatik
                          toggle: true
                          styles:
                            width: 85px
                        - entity: input_boolean.kuehlperiode
                          name: Kühlperiode
                          toggle: true
                          styles:
                            text-align: right
                  card_mod:
                    style: |
                      ha-card {
                        margin-top: -273px;
                        border: none;
                      }
                      .card-content {
                        padding: 8px !important;
                      }
            card_mod:
              style: |
                ha-card .header {
                  height: 43px;
                }

[MelleD]

Mhm works...?

[duczz]

sure, i said above when you add it via raw it works but not in the editor mode

[MelleD]

I guess the issue is this inner yaml editor (when no display editor is available), because without it works all fine.

I can also not change the text alignment or mode from the stack in card. It save always invalid yaml code.

[duczz]

Okay, thanks for the Check 👍🏻

[MelleD]

Not sure maybe it's also better to remove the editor and works with the yaml editor

It's also not working if you add a title card with the manuell yaml editor then nothing is saved. The title card is always empty, but with the plain yaml editor code it's working. Intresting