Help setting size of card

Configuration Frontend
1

So I’m currently working on some dashboards for my new tablet and my wife did a request, if I can take this card GitHub - t1gr0u/uv-index-card: A Lovelace card that shows a the UV index and risk level for Home Assistant and do something similar but with a more sleek design, a simple line that will fill depending of the UV index, and take out the text.

I started tweaking with the code and came into this forked version of the repo: GitHub - gonzo1805/uv-index-card-modified: A Lovelace card that shows a the UV index and risk level for Home Assistant. Changing the frontend of the integration as my wife's asking.. If you notice, I just modified the html parts to have the new SVG and took out the text and change some width and viewBox parameters. The problem is that when I add the card when testing it always shows like this:

image

I have been changing parameters but nothing seems to modify the size of the card itself. Do someone know how I can proceed without having to change the size of the SVG too much?

Shotout to t1gr0u for this card. I actually loved the idea but my wife wanted something different and can’t say no to her jaja.

2

Not gonna lie, at 2 am after 4 hours of trying I was desperate, but I finally found the culprit. Closing to prevent spam.

3

This is not a “solution”. If you do not explain what a reason was - then deleting the 1st post (and thus the whole thread) could be more productive than posting a “solution” which is not a solution. Not that the “solution” mark is for OTHER users who may face similar problems.

4

Yeah my bad. So the thing is that I’m not sure if this is specific of this code in particular or all the dashboard cards have this method in their code called connectCallback(): void.

This one assigns a couple of parameters related to position and size, between them is width and height. They control if I’m not wrong the maximun size the card can have before start cutting the things inside of it.

public connectedCallback(): void {
    Object.assign(this.style, {
      position: 'absolute',
      width: isTouch ? '1000px' : '50px',
      height: isTouch ? '600px' : '50px',
      transform: 'translate(-50%, -50%)',
      pointerEvents: 'none',
      zIndex: '999',
    });

    this.appendChild(this.ripple);
    this.ripple.primary = true;

    ['touchcancel', 'mouseout', 'mouseup', 'touchmove', 'mousewheel', 'wheel', 'scroll'].forEach((ev) => {
      document.addEventListener(
        ev,
        () => {
          clearTimeout(this.timer);
          this.stopAnimation();
          this.timer = undefined;
        },
        { passive: true },
      );
    });
  }
5

Never used this particular card.
In some cases, changing a size of some UI element is possible by card-mod.

6

The issues I’m seeing right now doesn’t seem to be able to modify with card-mod, since it is padding specific for the svg image and such