How to get rid of lines in stack-in-card?

gromar · February 17, 2024, 1:33pm

Hello all!

I tried to get rid of borders which are seen on Pic.1 using different styles but I’ doesn’t change anything. Is there any possibility to delete them?

My code:

cards:
  - cards:
      - cards:
          - entity: sensor.drukarka_3d_print_status
            name: CR-6 SE
            type: entity
            icon: None
          - entity: switch.gniazdko_drukarka3d_pietro
            hold_action:
              action: more-info
            show_icon: true
            show_name: false
            tap_action:
              action: toggle
            type: button
        type: horizontal-stack
      - entities:
          - entity: switch.drukarka_3d_led
        show_header_toggle: false
        type: entities
    mode: vertical
    type: custom:stack-in-card
    style: |
      ha-card {
      border: none;
      }
  - card:
      cards:
        - entity: sensor.drukarka_3d_print_progress
          type: custom:bar-card
          color: null
          positions:
            icon: 'off'
            indicator: inside
        - entities:
            - entity: sensor.drukarka_3d_print_time_left
            - entity: sensor.drukarka_3d_print_time
            - entity: sensor.drukarka_3d_print_file
            - entity: sensor.drukarka_3d_current_z
            - entity: sensor.drukarka_3d_tool_0_target
            - entity: sensor.drukarka_3d_bed_target
          show_header_toggle: false
          type: entities
        - cards:
            - entity: switch.drukarka_3d_emergency_stop
              hold_action:
                action: more-info
              name: Stop
              show_icon: true
              show_name: true
              type: button
            - entity: switch.drukarka_3d_cancel_print
              hold_action:
                action: more-info
              name: Anuluj
              show_icon: true
              show_name: true
              type: button
            - entity: switch.drukarka_3d_pause_print
              hold_action:
                action: more-info
              name: Pauza
              show_icon: true
              show_name: true
              type: button
            - entity: switch.drukarka_3d_shutdown_system
              hold_action:
                action: more-info
              name: Wyłączenie
              show_icon: true
              show_name: true
              type: button
          type: horizontal-stack
      mode: vertical
      type: custom:stack-in-card
      style: |
        ha-card {
        border: none;
        }
    conditions:
      - entity: binary_sensor.drukarka_3d_printing
        state_not: 'off'
    type: conditional
  - card:
      decimals: 1
      entities:
        - entity: sensor.drukarka_3d_tool_0_temperature
          name: Dysza
          show_state: true
        - entity: sensor.drukarka_3d_bed_temperature
          name: Stół
          show_state: true
      hours_to_show: 1
      name: Temperatura dyszy/ stołu
      points_per_hour: 120
      type: custom:mini-graph-card
    conditions:
      - entity: binary_sensor.drukarka_3d_printing
        state_not: 'off'
    type: conditional
  - entities:
      - entities:
          - entity: sensor.filament_temperatura
            name: false
        entity: sensor.filament_wilgotnosc
        icon: mdi:thermometer
        name: Temperatura/ wilgotność filamentu
        secondary_info: last-changed
        type: custom:multiple-entity-row
    show_header_toggle: false
    type: entities
type: vertical-stack

Stiltjack · February 17, 2024, 1:39pm

Hm… I don’t get lines.

Are we using the same card? Mine’s called “vertical stack in card”

type: custom:vertical-stack-in-card
cards:
  - show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.tomorrow_io_albert_street_daily
    forecast_type: hourly

etc. etc.

Ildar_Gabdullin · February 17, 2024, 1:54pm

These are different cards.

gromar · February 17, 2024, 2:11pm

changed to: custom:vertical-stack-in-card and after refreshing the webpage still I get the borders:

Code atm:

cards:
  - cards:
      - cards:
          - entity: sensor.drukarka_3d_print_status
            name: CR-6 SE
            type: entity
            icon: None
          - entity: switch.gniazdko_drukarka3d_pietro
            hold_action:
              action: more-info
            show_icon: true
            show_name: false
            tap_action:
              action: toggle
            type: button
        type: horizontal-stack
      - entities:
          - entity: switch.drukarka_3d_led
        show_header_toggle: false
        type: entities
    mode: vertical
    type: custom:vertical-stack-in-card
    style: |
      ha-card {
      border: none;
      }
  - card:
      cards:
        - entity: sensor.drukarka_3d_print_progress
          type: custom:bar-card
          color: null
          positions:
            icon: 'off'
            indicator: inside
        - entities:
            - entity: sensor.drukarka_3d_print_time_left
            - entity: sensor.drukarka_3d_print_time
            - entity: sensor.drukarka_3d_print_file
            - entity: sensor.drukarka_3d_current_z
            - entity: sensor.drukarka_3d_tool_0_target
            - entity: sensor.drukarka_3d_bed_target
          show_header_toggle: false
          type: entities
        - cards:
            - entity: switch.drukarka_3d_emergency_stop
              hold_action:
                action: more-info
              name: Stop
              show_icon: true
              show_name: true
              type: button
            - entity: switch.drukarka_3d_cancel_print
              hold_action:
                action: more-info
              name: Anuluj
              show_icon: true
              show_name: true
              type: button
            - entity: switch.drukarka_3d_pause_print
              hold_action:
                action: more-info
              name: Pauza
              show_icon: true
              show_name: true
              type: button
            - entity: switch.drukarka_3d_shutdown_system
              hold_action:
                action: more-info
              name: Wyłączenie
              show_icon: true
              show_name: true
              type: button
          type: horizontal-stack
      mode: vertical
      type: custom:vertical-stack-in-card
    style: |
      ha-card {
      border: none;
      }
    conditions:
      - entity: binary_sensor.drukarka_3d_printing
        state_not: 'off'
    type: conditional
  - card:
      decimals: 1
      entities:
        - entity: sensor.drukarka_3d_tool_0_temperature
          name: Dysza
          show_state: true
        - entity: sensor.drukarka_3d_bed_temperature
          name: Stół
          show_state: true
      hours_to_show: 1
      name: Temperatura dyszy/ stołu
      points_per_hour: 120
      type: custom:mini-graph-card
    conditions:
      - entity: binary_sensor.drukarka_3d_printing
        state_not: 'off'
    type: conditional
  - entities:
      - entities:
          - entity: sensor.filament_temperatura
            name: false
        entity: sensor.filament_wilgotnosc
        icon: mdi:thermometer
        name: Temperatura/ wilgotność filamentu
        secondary_info: last-changed
        type: custom:multiple-entity-row
    style: |
      ha-card {
      border: none;
      }        
    show_header_toggle: false
    type: entities
type: vertical-stack

Ildar_Gabdullin · February 17, 2024, 5:47pm

Goto stack-in-card repo.
There is a PR about compatibility with 2021.x (do not remember exact version). This PR is about these borders. There is a link to a fixed js-file in this PR. Take this js-file and replace the original js-file for your installed stack-in-card.
Now play with “keep:: borders: false/true” option.

Actually, even after the fix the card still has issues. Some of them may be fixed by card-mod (you will have to learn it).

LiQuid_cOOled · February 17, 2024, 9:40pm

Just speaking from my recent experience, some still exist. As you mentioned, card-mod does removes the rest.