strange placement/margin issues

[jouster1974]

Firstly, great card, love it .... looks incredible and so much better than what I had before

However, I do see some odd behaviour after editing or moving dashboard pages

This is on my main dashboard when I switch from editing to not editing.

Initially, it looks like it does above, but when I refresh the dashboard, it looks like this with the bottom of the card cut off...as you can see it seems to have a lot of extra space at the top of the card

then after refreshing the card, it appears correctly with all spacing good. Plusthe extra spacing above has disappeared

So, not the end of the world, but when on a wall tablet, it behaves differently in that it never returns to how it should

Whether I'm editing it or viewing it as normal, the card cuts off the bottom of the card above...there are no other cards displaying the same issue

I have to assume this is a margin issue but with there being no ways to adjust this (before starting card modding) I wanted to see if anyone else who is having the same issue

[jouster1974]

just wanted to add the actual quickest fix is to add in a gap card....all visually sorted for now but obviously something still isn't as it should be

[gcoan]

can you share your YAML code for the card and the dashboard sizing to help diagnosis

[pacemaker82]

@jouster1974 have you set the rows/columns for the sections view? Not setting them can have this behaviour, I recommend setting these. I will see if I can fix at some point ...

[jouster1974]

here is my code

type: custom:compact-power-card
entities:
  pv:
    entity: sensor.inverter_pv_power
    color: green
    decimal_places: 3
    unit: kW
    labels:
      - entity: sensor.generationfix
        icon: " "
      - entity: sensor.solarexprate
        decimal_places: 4
        icon: " "
      - entity: sensor.solargenrate
        decimal_places: 4
        icon: " "
    invert_state_values: false
    threshold: 0
    icon: ""
  grid:
    import_entity: sensor.smart_meter_electricity_power
    decimal_places: 3
    threshold: 0
    entity: sensor.smart_meter_electricity_energy_import
    color: orange
    unit: kW
    invert_state_values: false
    tap_action: more_info
    labels:
      - entity: sensor.powercost
        decimal_places: 2
        icon: " "
      - entity: sensor.smart_meter_electricity_import_unit_rate
        decimal_places: 3
        icon: " "
  subtract_devices_from_home: true
  devices:
    - entity: sensor.dryer_current_power
      color: green
      threshold: 0
      force_hide_under_threshold: true
      icon: phu:heated-maiden
      switch_entity: switch.dryer
    - entity: sensor.plugfridge_power
      icon: mdi:fridge-industrial-outline
      color: orange
    - entity: sensor.dehumidifier_current_power
      color: green
      threshold: 0
      force_hide_under_threshold: true
      icon: m3o:air-purifier-gen
      switch_entity: switch.dryer
    - entity: sensor.monitorapc_real_power
      icon: mdi:server
      color: red
      force_hide_under_threshold: true
      threshold: 0
    - entity: sensor.monitorloftrack_real_power
      icon: mdi:server-outline
      color: grey
    - entity: sensor.monitorplusavrack_real_power
      icon: phu:nvidia-shield
      force_hide_under_threshold: true
      threshold: 0
      color: grey
    - entity: sensor.plugwashingmachine_power
      icon: mdi:washing-machine
      threshold: 0
      force_hide_under_threshold: true
      switch_entity: switch.plugwashingmachine
      name: Washing Machine
      color: green
      subtract_from_home: false
    - entity: sensor.plugdishwasher_power
      icon: mdi:dishwasher
      threshold: 0
      force_hide_under_threshold: true
      color: green
    - entity: sensor.gardenroomavpowergroup
      name: GardenRoom AV
      icon: m3o:tv
      color: cyan
      force_hide_under_threshold: true
      threshold: 0
    - entity: sensor.studypowergroup
      color: white
      threshold: 0
      force_hide_under_threshold: true
      icon: mdi:chair-rolling
    - entity: sensor.plugstudymeross_power
      icon: phu:smart-power-strip
      threshold: 0
      force_hide_under_threshold: true
      color: white
      decimal_places: 3
enable_device_power_lines: true
remove_glow_effects: true
hide_card_background: false
curve_factor: 1
disable_home_gradient: false
threshold_mode: display_only
decimal_places: 3
grid_options:
  rows: 3

@jouster1974 have you set the rows/columns for the sections view? Not setting them can have this behaviour, I recommend setting these. I will see if I can fix at some point ...

the really problematic one is on a standard dashboard view , so not using sections yet

For the initial issue that is solved with a refresh, I do have sections setup.

When I go in to edit I can see it looks wrong there too

so I go into layout and still looks like this

I edit layout so it then looks like this (so, better)

but then I save it and it still encroaches on the card below it

but as before making these layout changes, a card refresh fixes it...so this one doesn't appear to be a layout issue

[khenderick]

Another case that feels the same, but doesn't look exactly as above. So sharing it in the hope it adds more clues on what's going on.

[pacemaker82]

I am working on some changes to hopefully resolve the overlapping.

[pacemaker82]

Please try 1.3.3.8 and let me know how it goes.

[khenderick]

Works perfect for my case 👍, thanks!

[jouster1974]

so the update fixes the issues at the bottom of the card but now the issues is at the top of the card and a refresh no longer fixes it

Ive updated...had this new issue, as seen below...then reverted to old version and its as it was and fine after a dashboard refresh

it is now also showing a larger gap at the bottom

so as soon as I rolll back to 1.3.3.7 it appears correctly, but again as soon as I edit the dashboard...

it shows like this

but is fixed with a refresh

As you can see in edit mode, the new version also seems to have some ghosted card below it ,but slightly higher and then it's lifted at the bottom, almost as if the recent cahgneds made still have the old card in the background...there is no other card underneath

also, whilst the new text size option is great...would it be possible to have just the label text for grid, pv etc so it's different to the main line of devices?

[pacemaker82]

I'm at a bit of a loss tbh because I cannot replicate this at all. Using the card in sections UI with your setup I get clean distances from cards above and below in both normal and edit mode.

Even when I resize the page to see if that breaks something it works fine:

Screen.Recording.2026-02-02.at.09.02.33.mov

I've tried lots of cards in different configs and they always constrain.

Can you paste your card yaml again for the above, please place it between code tags: ``` and ``` so its readable

[pacemaker82]

@jouster1974 you should also check your grid config:

  grid:
    import_entity: sensor.smart_meter_electricity_power
    decimal_places: 3
    threshold: 0
    entity: sensor.smart_meter_electricity_energy_import

Readme: https://github.com/pacemaker82/Compact-Power-Card#separate-entities-for-grid-or-battery

Name	Setting slug	What it does
Import Entity	import_entity	Sensor defining the import power from the grid.
Export Entity	export_entity	Sensor defining the export power to the grid.

Also, you are using phu icons which I have not used or tested with. Could be an issue ...

[pacemaker82]

Tested with phu and material icons that you have. No issues (other than a label alignment tweak i need to make under PV).