Lovelace: Button card

Share your Projects! Dashboards & Frontend
411

:tada: 0.0.6 released with fixes for 0.88 :tada:

3 Likes
412

Does not look like it was before. Text size is now to big and bold.

Capture
Capture1110×894 79.3 KB

413

yeah, we know, we’re just trying to get people out of an error state. feel free to play around with style and report back if you have a good fix. I don’t plan on looking at it more tonight

414

Everything did look correct on the previous fix from ammmze/button-card.The latest have correct text size only more bold than before :slight_smile:
Trying to find the version I added yesterday when I linked to the fix :stuck_out_tongue:

415

Looks really good to me now…

Any idea what CSS I can use to change the bottom of the button on the right to align with the bottom of the other 2? (the ones on the left are the core buttons, the one on the right this custom-button)
image

416

Very happy that it’s been fixed. I actually have a working UI again, yay!

There’s a few minor issues that I noticed, here is an annotated pic of them , plus one of how it looked before:

  • color_type: card and color_type: icon have different heights, if you put them side by side in a horizontal stack you’ll see they won’t line up properly.
  • kinda similar issue if you put an entity-button and custom-button in a horizontal stack together. they used to line up and now the custom button has a different height.
  • Label card (color_type: label-card) seems taller than it’s supposed to be?
  • The minimum height for buttons with no text or icon (color only) is a lot smaller - pic - new one on top and old way on bottom. To be honest I’m kinda torn on this, the new way could open more possibilities but the old way was more mobile friendly.

So pretty much every issue I’ve encountered was height-related. Perhaps it’s the larger/bolder text that is causing these issues or something? I can deal with these minor issues for now, super excited to have it working again :smiley:

417

So identical to my post just above yours… I am thinking there should be a CSS fix for it but I can’t find it yet.

Using font-weight: 400 fixes the holding…

418

Is it possible to password protect a button. For instance have the user enter a pin before the button gets enabled?

419

I love this card and thanks for the great work :slight_smile: There are two feature I would find very helpful:

  • Extend with custom more-info dialog, like in https://github.com/thomasloven/lovelace-popup-card . That way a “Living Room” button could for instance show a list of entities in said room when pressed (so that not all entities would have to be displayed in the view). Saves a lot of space.
  • Support different tap and hold actions. Again, the example above. Clicking “Living room” could turn on/off all lights whilst holding it could reveal the more-info dialog with all the entities in the room.
420

Here’s a dumb question that is more of a software question than just this card itself. How do I know what version to put a the end

- url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
  type: module

Is this the version of the button? javascript?

421

The version number means nothing if you’re not using custom updated. It’s just a string. Changing it, breaks the cache so that updates are loaded. That’s all.

1 Like
422

Announcement to all:

This is now a community card. No single dev is going to be maintaining it or adding features. It will be up to the community to do these things, should they feel the desire. Kuuji, Ludeeus and myself will review changes but will likely not be doing any actual work on it going forward.

1 Like
423

Anybody know why I can’t place one of these cards on top of another card?

Capture
Capture1640×561 47.7 KB

Both of the “office lamp” cards are button-cards. I can add more to the same card (see the office lamp and garage light card) but I’m unable to place the card on top of any other cards, they just own the entire column.

See below, I can never have a card underneath a “button-card”.

Thanks,

Capture4
Capture41556×574 51.6 KB
Capture3
Capture31245×784 53.4 KB
Capture2
Capture21536×611 52.9 KB

1 Like
424

You can:

image
image466×538 19.1 KB

image
image489×640 14.4 KB

Mine are both in Vertical-Stacks though

425

Sean… try this in the js file from line 40

        button-card-button div {
          padding: 2.25%;
          text-transform: none;
          font-size: 1.2rem;
          font-weight: 400;
          white-space: nowrap;

I changed the padding from 4% to 2.25%. The other stuff is as per an unmerged PR from @iantrich
This looks pretty right both on PC and mobile for me:
image

The 2 left buttons are the standard button card in core. The right one is this custom-button
It looks right on my iPhone, iPad and PC

1 Like
426

The most right button is slightly lower in height (see at the bottom of the card) you might want to adjust it just a tiny bit.

427

slightly higher you mean?
image
That’s 2.6%… very slightly lower on mobile

428

Hm this screenshot seems right to me though :stuck_out_tongue: . In your previous screenshot the button on the right is smaller.

429

there’s nothing in it lol

430

I meant that the right button is slightly smaller in your first screenshot. But it isn’t in the second.

cf16e0bf8fc51dc0ecf06cb9768dd51558e3331a

I drew a line, but it is barely noticeable. You should probably download or zoom in on the image to see the height difference.