Maintain left and right padding when embedded

GeorgeSG / lovelace-time-picker-card

🕰️ Time Picker Card for Home Assistant's Lovelace UI

MIT License

209 stars 14 forks source link

Maintain left and right padding when embedded #24

Closed tungmeister closed 2 years ago

tungmeister commented 3 years ago

Hi, I'm wanting to use embedded: true to reduce the vertical padding between multiple instances of the card however when enabled the left and right padding is also lost making the start of the card misaligned with other cards in the view: I had a look at the code and tried adding padding values to:

      .time-picker-row.embedded {
        padding: 0px 16px 16px;
      }

but that made no difference. My JS knowledge is very limited but if you could point me to what I need to tweak I'll adjust it myself.

EDIT: looks like it was just my browser cache misbehaving. This change is doing as I wanted.

MPowerData commented 2 years ago

Is the solution to this below setting?

.time-picker-row.embedded { padding: 0px 16px 16px; }

Because this does not appear to be working for me, even after clearing cache.

tungmeister commented 2 years ago

Is the solution to this below setting?

.time-picker-row.embedded { padding: 0px 16px 16px; }

Because this does not appear to be working for me, even after clearing cache.

did you delete the .gz version of the card? If you don't that gets used instead so any changes you make to the .js won't take effect.

MPowerData commented 2 years ago

Is the solution to this below setting? .time-picker-row.embedded { padding: 0px 16px 16px; } Because this does not appear to be working for me, even after clearing cache.

did you delete the .gz version of the card? If you don't that gets used instead so any changes you make to the .js won't take effect.

Ah, that indeed was needed. Thanks a lot.

I actually changed it to padding: 0px 16px 0px; for a more condensed look.

GeorgeSG commented 2 years ago

Hi,

If I understand correctly, you have 2 embedded cards - one with embedded: true, one without.

This is the expected default behavior:

when you set embedded: true the card expects it's nested/embedded within another card and removes all padding to align with other components that may be around it.
when the card does not have embedded: true it acts as if it's a standalone card.

Using embedded: true to reduce vertical padding is a cheat :) I see how it may be something people want though, I'll consider adding a separate option for that.

GeorgeSG commented 2 years ago

Version 1.3.0 adds a thin option that should help.