HA border/shadow conflic

[SeLLeRoNe]

Here the requested example: With the problem:

title: Temperatures
icon: mdi:thermometer
panel: true
theme: darkblue
path: temperatures
cards:
  - type: vertical-stack
    cards:
      - !include ../cards/compact_custom_header_main.yaml
      - type: custom:layout-card
        layout: vertical
        cards:
          - type: vertical-stack
            cards:
              - type: custom:card-modder
                style:
                  --paper-card-background-color: 'rgba(11, 11, 11, 0.40)'
                  text-align: center
                  color: silver
                  font-size: 25px
                  border-radius: 20px
                  border: solid 1px rgba(100,100,100,0.3)
                  box-shadow: 3px 3px rgba(0,0,0,0.4)
                  background-image: url("/local/cardbackK.png")
                  background-repeat: no-repeat
                  background-color: rgba(50,50,50,0.3)
                  background-size: 100% 48px
                card:
                  content: Temperatures
                  type: markdown
          - type: custom:vertical-stack-in-card
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:config-template-card
                    entities:
                      - sensor.dark_sky_temperature
                    config:
                      type: custom:mini-graph-card
                      name: Outside
                      icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                      name_adaptive_color: true
                      icon_adaptive_color: true
                      more_info: false
                      height: 150
                      line_width: 4
                      hours_to_show: 24
                      points_per_hour: 0.50
                      group: false
                      hour24: true
                      animate: true
                      decimals: 1
                      align_state: center
                      show:
                        name: true
                        icon: true
                        state: true
                        graph: false
                        fill: false
                        points: false
                        legend: false
                        extrema: true
                        labels: false
                      entities:
                        - entity: sensor.dark_sky_temperature
                          color: '#FF8000'
                          show_indicator: true
                  - type: custom:config-template-card
                    entities:
                      - sensor.dark_sky_temperature
                    config:
                      type: custom:mini-graph-card
                      name: Outside
                      icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                      name_adaptive_color: true
                      icon_adaptive_color: true
                      more_info: false
                      height: 150
                      line_width: 4
                      hours_to_show: 24
                      points_per_hour: 0.50
                      group: false
                      hour24: true
                      animate: true
                      decimals: 1
                      align_state: center
                      show:
                        name: true
                        icon: true
                        state: true
                        graph: false
                        fill: false
                        points: false
                        legend: false
                        extrema: true
                        labels: false
                      entities:
                        - entity: sensor.dark_sky_temperature
                          color: '#FF8000'
                          show_indicator: true
                  - type: custom:config-template-card
                    entities:
                      - sensor.dark_sky_temperature
                    config:
                      type: custom:mini-graph-card
                      name: Outside
                      icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                      name_adaptive_color: true
                      icon_adaptive_color: true
                      more_info: false
                      height: 150
                      line_width: 4
                      hours_to_show: 24
                      points_per_hour: 0.50
                      group: false
                      hour24: true
                      animate: true
                      decimals: 1
                      align_state: center
                      show:
                        name: true
                        icon: true
                        state: true
                        graph: false
                        fill: false
                        points: false
                        legend: false
                        extrema: true
                        labels: false
                      entities:
                        - entity: sensor.dark_sky_temperature
                          color: '#FF8000'
                          show_indicator: true
              - type: horizontal-stack
                cards:
                  - type: custom:config-template-card
                    entities:
                      - sensor.dark_sky_temperature
                    config:
                      type: custom:mini-graph-card
                      name: Outside
                      icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                      name_adaptive_color: true
                      icon_adaptive_color: true
                      more_info: false
                      height: 150
                      line_width: 4
                      hours_to_show: 24
                      points_per_hour: 0.50
                      group: false
                      hour24: true
                      animate: true
                      decimals: 1
                      align_state: center
                      show:
                        name: true
                        icon: true
                        state: true
                        graph: false
                        fill: false
                        points: false
                        legend: false
                        extrema: true
                        labels: false
                      entities:
                        - entity: sensor.dark_sky_temperature
                          color: '#FF8000'
                          show_indicator: true
              - type: horizontal-stack
                cards:
                  - type: custom:config-template-card
                    entities:
                      - sensor.dark_sky_temperature
                    config:
                      type: custom:mini-graph-card
                      name: Outside
                      icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                      name_adaptive_color: true
                      icon_adaptive_color: true
                      more_info: false
                      height: 150
                      line_width: 4
                      hours_to_show: 24
                      points_per_hour: 0.50
                      group: false
                      hour24: true
                      animate: true
                      decimals: 1
                      align_state: center
                      show:
                        name: true
                        icon: true
                        state: true
                        graph: false
                        fill: false
                        points: false
                        legend: false
                        extrema: true
                        labels: false
                      entities:
                        - entity: sensor.dark_sky_temperature
                          color: '#FF8000'
                          show_indicator: true
                  - type: custom:config-template-card
                    entities:
                      - sensor.dark_sky_temperature
                    config:
                      type: custom:mini-graph-card
                      name: Outside
                      icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                      name_adaptive_color: true
                      icon_adaptive_color: true
                      more_info: false
                      height: 150
                      line_width: 4
                      hours_to_show: 24
                      points_per_hour: 0.50
                      group: false
                      hour24: true
                      animate: true
                      decimals: 1
                      align_state: center
                      show:
                        name: true
                        icon: true
                        state: true
                        graph: false
                        fill: false
                        points: false
                        legend: false
                        extrema: true
                        labels: false
                      entities:
                        - entity: sensor.dark_sky_temperature
                          color: '#FF8000'
                          show_indicator: true
                  - type: custom:config-template-card
                    entities:
                      - sensor.dark_sky_temperature
                    config:
                      type: custom:mini-graph-card
                      name: Outside
                      icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                      name_adaptive_color: true
                      icon_adaptive_color: true
                      more_info: false
                      height: 150
                      line_width: 4
                      hours_to_show: 24
                      points_per_hour: 0.50
                      group: false
                      hour24: true
                      animate: true
                      decimals: 1
                      align_state: center
                      show:
                        name: true
                        icon: true
                        state: true
                        graph: false
                        fill: false
                        points: false
                        legend: false
                        extrema: true
                        labels: false
                      entities:
                        - entity: sensor.dark_sky_temperature
                          color: '#FF8000'
                          show_indicator: true
              - type: custom:mini-graph-card
                name: Temperature 48h
                icon: fas:thermometer-half
                name_adaptive_color: true
                icon_adaptive_color: true
                more_info: false
                group: false
                height: 150
                line_width: 4
                hours_to_show: 24
                points_per_hour: 0.5
                hour24: true
                animate: true
                decimals: 1
                align_state: center
                show:
                  name: false
                  icon: false
                  state: false
                  graph: line
                  fill: false
                  points: false
                  legend: true
                  extrema: false
                  labels: false
                entities:
                  - entity: sensor.dark_sky_temperature
                    name: Outside
                    color: '#FF8000'
                  - entity: sensor.dark_sky_temperature
                    name: Master Bedroom
                    color: '#0080FF'
                  - entity: sensor.dark_sky_temperature
                    name: Living Room
                    color: '#FF3333'
                  - entity: sensor.dark_sky_temperature
                    name: Office
                    color: '#7F00FF'
                  - entity: sensor.dark_sky_temperature
                    name: Bedroom
                    color: '#00FF00'
                  - entity: sensor.dark_sky_temperature
                    name: Bathroom
                    color: '#33FF99'

Without the problem:

title: Temperatures
icon: mdi:thermometer
panel: true
theme: darkblue
path: temperatures_old
cards:
  - type: vertical-stack
    cards:
      - !include ../cards/compact_custom_header_main.yaml
      - type: custom:layout-card
        layout: vertical
        cards:
          - type: vertical-stack
            cards:
              - type: custom:card-modder
                style:
                  --paper-card-background-color: 'rgba(11, 11, 11, 0.40)'
                  text-align: center
                  color: silver
                  font-size: 25px
                  border-radius: 20px
                  border: solid 1px rgba(100,100,100,0.3)
                  box-shadow: 3px 3px rgba(0,0,0,0.4)
                  background-image: url("/local/cardbackK.png")
                  background-repeat: no-repeat
                  background-color: rgba(50,50,50,0.3)
                  background-size: 100% 48px
                card:
                  content: Temperatures
                  type: markdown
          - type: custom:vertical-stack-in-card
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:mini-graph-card
                    name: Outside
                    icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                    name_adaptive_color: true
                    icon_adaptive_color: true
                    more_info: false
                    height: 150
                    line_width: 4
                    hours_to_show: 24
                    points_per_hour: 0.50
                    group: false
                    hour24: true
                    animate: true
                    decimals: 1
                    align_state: center
                    show:
                      name: true
                      icon: true
                      state: true
                      graph: false
                      fill: false
                      points: false
                      legend: false
                      extrema: true
                      labels: false
                    entities:
                      - entity: sensor.dark_sky_temperature
                        color: '#FF8000'
                        show_indicator: true
                  - type: custom:mini-graph-card
                    name: Outside
                    icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                    name_adaptive_color: true
                    icon_adaptive_color: true
                    more_info: false
                    height: 150
                    line_width: 4
                    hours_to_show: 24
                    points_per_hour: 0.50
                    group: false
                    hour24: true
                    animate: true
                    decimals: 1
                    align_state: center
                    show:
                      name: true
                      icon: true
                      state: true
                      graph: false
                      fill: false
                      points: false
                      legend: false
                      extrema: true
                      labels: false
                    entities:
                      - entity: sensor.dark_sky_temperature
                        color: '#FF8000'
                        show_indicator: true
                  - type: custom:mini-graph-card
                    name: Outside
                    icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                    name_adaptive_color: true
                    icon_adaptive_color: true
                    more_info: false
                    height: 150
                    line_width: 4
                    hours_to_show: 24
                    points_per_hour: 0.50
                    group: false
                    hour24: true
                    animate: true
                    decimals: 1
                    align_state: center
                    show:
                      name: true
                      icon: true
                      state: true
                      graph: false
                      fill: false
                      points: false
                      legend: false
                      extrema: true
                      labels: false
                    entities:
                      - entity: sensor.dark_sky_temperature
                        color: '#FF8000'
                        show_indicator: true
              - type: horizontal-stack
                cards:
                  - type: custom:mini-graph-card
                    name: Outside
                    icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                    name_adaptive_color: true
                    icon_adaptive_color: true
                    more_info: false
                    height: 150
                    line_width: 4
                    hours_to_show: 24
                    points_per_hour: 0.50
                    group: false
                    hour24: true
                    animate: true
                    decimals: 1
                    align_state: center
                    show:
                      name: true
                      icon: true
                      state: true
                      graph: false
                      fill: false
                      points: false
                      legend: false
                      extrema: true
                      labels: false
                    entities:
                      - entity: sensor.dark_sky_temperature
                        color: '#FF8000'
                        show_indicator: true
                  - type: custom:mini-graph-card
                    name: Outside
                    icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                    name_adaptive_color: true
                    icon_adaptive_color: true
                    more_info: false
                    height: 150
                    line_width: 4
                    hours_to_show: 24
                    points_per_hour: 0.50
                    group: false
                    hour24: true
                    animate: true
                    decimals: 1
                    align_state: center
                    show:
                      name: true
                      icon: true
                      state: true
                      graph: false
                      fill: false
                      points: false
                      legend: false
                      extrema: true
                      labels: false
                    entities:
                      - entity: sensor.dark_sky_temperature
                        color: '#FF8000'
                        show_indicator: true
                  - type: custom:mini-graph-card
                    name: Outside
                    icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
                    name_adaptive_color: true
                    icon_adaptive_color: true
                    more_info: false
                    height: 150
                    line_width: 4
                    hours_to_show: 24
                    points_per_hour: 0.50
                    group: false
                    hour24: true
                    animate: true
                    decimals: 1
                    align_state: center
                    show:
                      name: true
                      icon: true
                      state: true
                      graph: false
                      fill: false
                      points: false
                      legend: false
                      extrema: true
                      labels: false
                    entities:
                      - entity: sensor.dark_sky_temperature
                        color: '#FF8000'
                        show_indicator: true
              - type: custom:mini-graph-card
                name: Temperature 48h
                icon: fas:thermometer-half
                name_adaptive_color: true
                icon_adaptive_color: true
                more_info: false
                group: false
                height: 150
                line_width: 4
                hours_to_show: 24
                points_per_hour: 0.5
                hour24: true
                animate: true
                decimals: 1
                align_state: center
                show:
                    name: false
                    icon: false
                    state: false
                    graph: line
                    fill: false
                    points: false
                    legend: true
                    extrema: false
                    labels: false
                entities:
                    - entity: sensor.dark_sky_temperature
                      name: Outside
                      color: '#FF8000'
                    - entity: sensor.dark_sky_temperature
                      name: Master Bedroom
                      color: '#0080FF'
                    - entity: sensor.dark_sky_temperature
                      name: Living Room
                      color: '#FF3333'
                    - entity: sensor.dark_sky_temperature
                      name: Office
                      color: '#7F00FF'
                    - entity: sensor.dark_sky_temperature
                      name: Bedroom
                      color: '#00FF00'
                    - entity: sensor.dark_sky_temperature
                      name: Bathroom
                      color: '#33FF99'

Screenshot with the problem:

Screenshot without the problem:

Let me know if you need further info :)

[iantrich]

Can you try to replicate this with the minimal config? This is just too much to work with. Preferably with the demo sensor platform

configuration.yaml

sensor:
  - platform: demo

Also test if it is just with your dark theme.

[iantrich]

@SeLLeRoNe can you add the group option to true as suggested by @kalkih here https://github.com/kalkih/mini-graph-card/issues/50#issuecomment-474512958

[kalkih]

The group option will not work well in this case, since the names will probably be cut off by the border-radius without any paddings.

Are the configs the same? except the wrapping of the mini-graph-cards? What do you have box-shadow and border-radius set to in your theme?

[SeLLeRoNe]

Hi guys, thanks for the time and effort you're both putting in place to help me :) I do appreciate that!

@kalkih I did open this issue here because without the template card it doesn't show that error, everything is wrapped inside a vertical-in-stack-card

As soon as I remove the template card everything works fine, and in all the configurations group is set to false, to be honest I didn't even think it could still have been the mini-graph-card

With group: true on everyuthing it is kinda messy ^^

Theme-wise I have this:

  # Round corner + Box Shadown
  ha-card-border-radius: '20px'
  ha-card-box-shadow: 3px 3px rgba(0,0,0,0.4)

And you're right, the last one is not noticeable because they are overlying one on the other, in fact I can notice the "top" one

[kalkih]

Haha, yes, that looks hideous 😆

Theme-wise I have this:

Hmm, with this theme setup I would have thought that the box-shadow would show up on the cards of both of your example configs. 🤔

Is it possible that the vertical-stack-in-card disables the box-shadow of its direct child nodes, and when wrapping the graphs inside the template card they are no longer direct children in the dom and the box-shadow is not removed? Just a thought.

[SeLLeRoNe]

Well, I did notify the dev of vertical-stack-in-card 10 days ago (https://github.com/custom-cards/vertical-stack-in-card/issues/53#issuecomment-473573504) because those shadow and theme configs weren't working, so he released an update to fix this... How he fixed I don't know, but before those weren't applied on vertical-in-stack-card

Now, those works, and it was working with group: false and everything (as per screenshot), but as soon as I added the template card they started to act weird :)

And as you can see, no config changes in place, literally just put each graph inside the template card :)

[kalkih]

After looking at the code of the vertical-stack-in-card, this seems to be the reason behind this box-shadow behavior:

Is it possible that the vertical-stack-in-card disables the box-shadow of its direct child nodes, and when wrapping the graphs inside the template card they are no longer direct children in the dom and the box-shadow is not removed? Just a thought.

https://github.com/custom-cards/vertical-stack-in-card/blob/0beaa57ae14f2352dcee45d9f29019c5f64a0926/vertical-stack-in-card.js#L150

[SeLLeRoNe]

So what should I do (if I can actually do something)?

[kalkih]

Not really sure actually, don't think there's an elegant solution. Maybe with the help of card modder to override the box-shadow.

[SeLLeRoNe]

Well, I had to remove the icon for the name lenght issue, so there is no real need anymore to use the template plugin on this ^^

Thanks for your time guys :)

Andrea

[alanmilinovic]

I am also using vertical-stack-in-card with bar-card and every time data is refreshed in my card borders are back, so it is looking fine only on first load of the card.

If I use replace config-template-card with any other card type it is working fine, so it must be something that config-template-card is doing to return back borders.

Any idea how to remove borders permanently, tried setting style but didn't helped?