Borders...

[chench00]

I read some issues related to borders and downloaded the latest version of the stack-in-card.js and uploaded to my configuration making sure to delete the other file (.gz?) as instructed on another thread but the border around my card refuses to go away. Here's my configuration:

    type: custom:layout-card
    layout_type: custom:grid-layout
    cards:
      - views:
          - title: Home
        type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:mushroom-title-card
            title: Hallway
          - type: custom:stack-in-card
            mode: horizontal
            cards:
              - type: custom:mushroom-template-card
                icon: mdi:light-switch
                layout: vertical
                tap_action:
                  action: toggle
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                entity: switch.hallway
                icon_color: |-
                  {% set state=states('switch.hallway') %}
                  {% if state=='on' %}
                  orange
                  {% elif state=='off' %}
                  white
                  {% endif %}
                secondary: '{{ states(''switch.hallway'')}}'
                multiline_secondary: true
                primary: Hallway
    layout:
      height: 225px

Here's an example:

The border around "Hallway off" switch icon should be gone as before?

[ildar170975]

Check the same case w/o using mushrooms (e.g. with conventional Entities) - see if it changes smth

[chench00]

@ildar170975 I used a button card and the border remains so it appears to be indeed an issue with stack-in-card:

    views:
      - title: Home
    type: custom:stack-in-card
    mode: vertical
    cards:
      - type: custom:mushroom-title-card
        title: Office
      - type: custom:stack-in-card
        mode: horizontal
        cards:
          - type: button
            tap_action:
              action: toggle
            entity: light.bedroom_lights
          - type: button
            tap_action:
              action: toggle
            entity: light.bedroom_lights

[ildar170975]

This is the very same bug as this: https://github.com/custom-cards/stack-in-card/issues/34 If one stack contains another stack - then settings are not applied to the internal stack. That issue was about a margin & box-radius. Seems that the same is about a box-shadow & border.

Consider this short example:

type: custom:stack-in-card
mode: vertical
cards:
  - type: entity
    entity: sun.sun
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: button
      - type: button

Before 2022.11 - the internal stack definitely had a box-shadow: Even with this:

keep:
  box-shadow: false or true

After 2022.11 - the internal stack has a border: Even with this:

keep:
  border: false or true

The card seems to be abandoned. The recent fix for borders seems to by hasty and does not solve problems with an internal stack.

[chench00]

@ildar170975 Thanks for the detailed explanation. I've been chasing a fix for quite sometime so thank you. I think it's time to move on to something else.

[ildar170975]

@chench00 I am staying with this card, but have to use card-mod to fix these glitches. An example of a fix is provided here - https://github.com/custom-cards/stack-in-card/issues/34

[chench00]

Is it possible to also remove the border? Your example fixes the margin?

[ildar170975]

Yes, change it for "border: none" similarly.

[chench00]

@ildar170975 Thank you! It works perfectly!

[cristidobrescu]

Hi @chench00 , can you please share the exact line you`ve used to fix this? As I tried many combination but not only one had worked

[chench00]

@cristidobrescu Sorry for the delay in responding. This is the line I used:

        style: |
          ha-card {
          border: none;
          }

Here it is in use on one of my cards:

    type: custom:layout-card
    layout_type: custom:grid-layout
    cards:
      - views:
          - title: Home
        type: custom:stack-in-card
        mode: vertical
        cards:
          - type: custom:mushroom-title-card
            title: Kitchen
          - type: custom:stack-in-card
            mode: horizontal
            card_mod: null
            style: |
              ha-card {
              border: none;
              }
            cards:
              - type: custom:mushroom-template-card
                icon: mdi:lock
                layout: vertical
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                entity: lock.kitchen_door
                icon_color: |-
                  {% set state=states('lock.kitchen_door') %}
                  {% if state=='unlocked' %}
                  red
                  {% elif state=='locked' %}
                  green
                  {% endif %}
                secondary: '{{ states(''lock.kitchen_door'')}}'
                multiline_secondary: true
                primary: Door
              - type: custom:mushroom-template-card
                icon: mdi:window-closed
                layout: vertical
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                entity: binary_sensor.kitchen_window
                icon_color: |-
                  {% set state=states('binary_sensor.kitchen_window') %}
                  {% if state=='on' %}
                  orange
                  {% elif state=='off' %}
                  white
                  {% endif %}
                secondary: |-
                  {% set state=states('binary_sensor.kitchen_window') %}
                  {% if state=='on' %}
                  Open
                  {% elif state=='off' %}
                  Closed
                  {% endif %}
                multiline_secondary: true
                primary: Window
              - type: custom:mushroom-template-card
                icon: mdi:motion-sensor
                layout: vertical
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                entity: binary_sensor.kitchen_motion
                icon_color: |-
                  {% set state=states('binary_sensor.kitchen_motion') %}
                  {% if state=='on' %}
                  red
                  {% elif state=='off' %}
                  white
                  {% endif %}
                secondary: '{{ states(''binary_sensor.kitchen_motion'')}}'
                multiline_secondary: true
                primary: Motion
              - type: custom:mushroom-template-card
                icon: mdi:thermometer
                layout: vertical
                tap_action:
                  action: more-info
                hold_action:
                  action: none
                double_tap_action:
                  action: none
                entity: sensor.kitchen_motion_air_temperature_2
                icon_color: white
                secondary: '{{ states(''sensor.kitchen_motion_air_temperature_2'')}} F'
                multiline_secondary: true
                primary: Climate
    layout: {}

[cristidobrescu]

Thanks, I will try it, meanwhile I restored my HA to previously backup 9.2; It happned to not working due to an upgrade I did today to 11.5. Thanks for your support. I will update again

[cristidobrescu]

So... the code is working on stack-in-card, but it seems like the HA Core 11.5 affect the other cards too; same issue with horizontal-stack card. I applied the code to this card too but doesn't change it. I had to go bavk again to my stable core which is 9.2 Cheers mate