Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Borders... #51

Open
chench00 opened this issue Nov 26, 2022 · 12 comments
Open

Borders... #51

chench00 opened this issue Nov 26, 2022 · 12 comments
Labels
bug Something isn't working

Comments

@chench00
Copy link

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:

Screen Shot 2022-11-26 at 6 13 06 PM

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

@chench00 chench00 added the bug Something isn't working label Nov 26, 2022
@ildar170975
Copy link

ildar170975 commented Nov 29, 2022

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

@chench00
Copy link
Author

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

Screen Shot 2022-11-29 at 10 03 08 AM

    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
Copy link

This is the very same bug as this: #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:
image
Even with this:

keep:
  box-shadow: false or true

After 2022.11 - the internal stack has a border:
image
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
Copy link
Author

@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
Copy link

@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 - #34

@chench00
Copy link
Author

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

@ildar170975
Copy link

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

@chench00
Copy link
Author

@ildar170975 Thank you! It works perfectly!

@cristidobrescu
Copy link

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
Copy link
Author

chench00 commented Dec 1, 2022

@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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants