Open spaces between cards in Dwains Dasboard

[pbeumer2001 (Patrick Beumer)]

Hi there,

Im building a dashboard based on Dwains dashboard. The dashboard should fit on a 10 inch tablet without the need for scrolling. Now, I bassicly got all the cards I need on the home page but there is blank spacing between cards that I want to get rid of. I dont have the options tomove the cards around (I think because they are all Lovelace cards). Does anybody know how to get rid of these empty spaces. In the picture is a clear exanple where I want to calander cards to move up until the waste disposal card.

Re arranging the cards would also help but not 100%. But I could figure out how the auto arraging works…

[WallyR (Wally)]

You need an integration called Card Mod.

GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any...

This integration allows you to alter the CSS settings, so borders, colors, margins and so on can be changed to your liking.

[WallyR (Wally)]

You might want to use the forum post for better explanations here.

Card-mod - Add css styles to any lovelace card

This is not a custom card. Instead it’s a plugin which changes the way all other cards work How about this? type: entities style: | ha-card { color: red; } entities: - light.bed_light - light.ceiling_lights - light.kitchen_lights [51] Not a custom: in sight. Or this? [mov] (Please click this gif to open it. It seems to be prone to artifacting when compressed) Or how about changing what happens when you click the name or icon in an entities-card? FANTASTIC POST BY ILDAR…

Especially the link in the bottom of the first post to " FANTASTIC POST BY ILDAR GABDULLIN ON HOW TO MODIFY EVERYTHING WITH CARD-MOD" is a good post for explanations and the " How to manage a row’s height" might be one way to solve your problem.

[pbeumer2001 (Patrick Beumer)]

Hi, thanks for your answer however Im not sure if this will do the trick. Im bassicly talking about 2 seperatd cards that have spacing between them. The card which states 5 - 11 jan. 2023 needs to move upwards to the card which states PMD, Dinsdag (over 12 dagen)

[WallyR (Wally)]

It should still be possible.
It is the borders you need to modify.
I will post my modifications later when I get home.
I have some cards in a horizontal and vertical stack that I have moved closer together that way.

[pbeumer2001 (Patrick Beumer)]

Hi, we are talking about 2 seperate cards here. First card (top right) is

type: custom:auto-entities
card:
  title: Volgende ophaaldata afval
  type: entities
col_span: '2'
col_span_lg: '1'
col_span_xl: '2'
filter:
  include:
  - entity_id: sensor.afvalwijzer_pmd_next
    options:
      secondary: "{% set count = states(config.entity)|int %} {% set day = state_attr(config.entity,'day')\
        \ %} {% set dagen =\n  {'Monday': 'Maandag',\n  'Tuesday': 'Dinsdag',\n  'Wednesday':\
        \ 'Woensdag',\n  'Thursday': 'Donderdag',\n  'Friday': 'Vrijdag',\n  'Saturday':\
        \ 'Zaterdag',\n  'Sunday': 'Zondag'} %}\n{% set dag = dagen[day] if day in\
        \ dagen else day %} {% set unit = 'Dag' if count == 1 else 'dagen' %}\n\n\
        {% if count < 30 %} {% set phrase = dag%}{% endif %} {{phrase}} {% if count\
        \ != 0%} (over {{count}} {{unit}}) {% endif %}\n"
      state: '{{state_attr(config.entity,''date'')}}

        '
      type: custom:template-entity-row
  - entity_id: sensor.afvalwijzer_gft_next
    options:
      secondary: "{% set count = states(config.entity)|int %} {% set day = state_attr(config.entity,'day')\
        \ %} {% set dagen =\n  {'Monday': 'Maandag',\n  'Tuesday': 'Dinsdag',\n  'Wednesday':\
        \ 'Woensdag',\n  'Thursday': 'Donderdag',\n  'Friday': 'Vrijdag',\n  'Saturday':\
        \ 'Zaterdag',\n  'Sunday': 'Zondag'} %}\n{% set dag = dagen[day] if day in\
        \ dagen else day %} {% set unit = 'Dag' if count == 1 else 'dagen' %}\n{%\
        \ if count < 30 %} {% set phrase = dag%}{% endif %} {{phrase}} {% if count\
        \ != 0%} (over {{count}} {{unit}}) {% endif %}\n"
      state: '{{state_attr(config.entity,''date'')}}

        '
      type: custom:template-entity-row
  - entity_id: sensor.afvalwijzer_papier_next
    options:
      secondary: "{% set count = states(config.entity)|int %} {% set day = state_attr(config.entity,'day')\
        \ %} {% set dagen =\n  {'Monday': 'Maandag',\n  'Tuesday': 'Dinsdag',\n  'Wednesday':\
        \ 'Woensdag',\n  'Thursday': 'Donderdag',\n  'Friday': 'Vrijdag',\n  'Saturday':\
        \ 'Zaterdag',\n  'Sunday': 'Zondag'} %}\n{% set dag = dagen[day] if day in\
        \ dagen else day %} {% set unit = 'Dag' if count == 1 else 'dagen' %}\n\n\
        {% if count < 30 %} {% set phrase = dag%}{% endif %} {{phrase}} {% if count\
        \ != 0%} (over {{count}} {{unit}}) {% endif %}\n"
      state: '{{state_attr(config.entity,''date'')}}

        '
      type: custom:template-entity-row
  - entity_id: sensor.afvalwijzer_restafval_next
    options:
      secondary: "{% set count = states(config.entity)|int %} {% set day = state_attr(config.entity,'day')\
        \ %} {% set dagen =\n  {'Monday': 'Maandag',\n  'Tuesday': 'Dinsdag',\n  'Wednesday':\
        \ 'Woensdag',\n  'Thursday': 'Donderdag',\n  'Friday': 'Vrijdag',\n  'Saturday':\
        \ 'Zaterdag',\n  'Sunday': 'Zondag'} %}\n{% set dag = dagen[day] if day in\
        \ dagen else day %} {% set unit = 'Dag' if count == 1 else 'dagen' %}\n\n\
        {% if count < 30 %} {% set phrase = dag%}{% endif %} {{phrase}} {% if count\
        \ != 0%} (over {{count}} {{unit}}) {% endif %}\n"
      state: '{{state_attr(config.entity,''date'')}}

        '
      type: custom:template-entity-row
position: top
row_span: '1'
row_span_lg: '1'
row_span_xl: '1'
sort:
  method: state
  numeric: true

and the second cards (bottom right)

type: calendar
col_span: '2'
col_span_lg: '2'
col_span_xl: '2'
entities:
- calendar.gezin
initial_view: listWeek
position: top
row_span: '1'
row_span_lg: '1'
row_span_xl: '1'

[WallyR (Wally)]

It is also separate cards in stack

[Troon]

@pbeumer2001

Im building

Please use “normal” apostrophes in your posts rather than back-ticks as those are used to denote code, which is the reason for the odd formatting of your posts.

[pbeumer2001 (Patrick Beumer)]

Well, I already fixed it differently. I managed to create a vertical-stack card and combined both cards together. bassicly forced Dwains dashboard to place them underneath each other.

[WallyR (Wally)]

I had a look at my card setup and here is the text.
I use two frontend integrations.
stack-in-card and card_mod
The stack-in-card remove completely the spaces between the cards.
The card mod remove borders, paddings and margins. The line with 0 0 0 16px is the space internally in the card and the 16px is especially the left padding.

I have played around a bit with the settings and here is the result.

type: custom:vertical-stack-in-card
cards:
  - type: markdown
    content: '# Bedroom 1'
    style: |
      ha-card {
        box-shadow: none;
        border: none;
        margin: 0;
      }
      ha-markdown.no-header {
        box-shadow: none;
        padding: 0 0 0 16px;
        border: none;
        margin: 0;
      }
  - type: markdown
    content: '# Bedroom 2'
    style: |
      ha-card {
        box-shadow: none;
        border: none;
        margin: 0;
      }
  - type: markdown
    content: '# Bedroom 3'
    style: |
      ha-card {
        box-shadow: none;
        border: none;
        margin: 0;
      }
      ha-markdown.no-header {
        box-shadow: none;
        padding: 0 0 0 16px;
        border: none;
        margin: 0;
      }
  - type: markdown
    content: '# Bedroom 4'
    style: |

      ha-markdown.no-header {
        box-shadow: none;
        padding: 0 0 0 16px;
        border: none;
        margin: 0;
      }

[pbeumer2001 (Patrick Beumer)]

Nice!!! Thanks for the tip. Like already mentioned, I`ve merged both cards together so Dwains dashboard has to take is as 1 card…