question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

margin: none still visible after 2022.11 release

See original GitHub issue

Checklist

  • I updated the card to the latest version available
  • I cleared the cache of my browser

Describe the bug Formatting seems to be wrong after 2022.11 and the new rounded “icons” image

When drawing two cards on top of each other - I usually put some timer or other data in the overlaid one only while that device is on.

Version of the card Version: 3.4.2 To Reproduce This is the configuration I used:

type: custom:button-card
      entity: sensor.washer_power
      state_display: '[[[ return Math.round(entity.state) + " W" ]]]'
      margin: none
      show_name: false
      show_icon: false
      show_state: true
      styles:
        card:
          - box-shadow: none
          - font-size: 12px
        state:
          - color: |
              [[[
                if (states['sensor.washer_power'].state > 2)
                  return "red";
                else
                  return "white";
              ]]]

Screenshots If applicable, add screenshots to help explain your problem. See above

Expected behavior A clear and concise description of what you expected to happen. The border/margin of the custom card should not visible, as it was in pre-2022.11

Desktop (please complete the following information):

  • Browser [e.g. chrome, safari] Chrome
  • Version [e.g. 22] 106.0.5249.119

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context Add any other context about the problem here.

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
troininecommented, Nov 12, 2022

As a workaround, assuming you don’t want the borders visible in 2022.11.x you can globally disable those in the theme as discussed in the HA forum:

ha-card-border-width: 0

Ref to tested workaround: https://github.com/troinine/hass-config/commit/c194bb54a470f6c1749532b8444780507bae24d3

Or alternatively, you can set it only to your button-card by defining it in the card style:

  styles:
    card:
      - border-width: 0
0reactions
Joao-Sousa-71commented, Dec 3, 2022

As a workaround, assuming you don’t want the borders visible in 2022.11.x you can globally disable those in the theme as discussed in the HA forum:

ha-card-border-width: 0

Ref to tested workaround: troinine/hass-config@c194bb5

Or alternatively, you can set it only to your button-card by defining it in the card style:

  styles:
    card:
      - border-width: 0

This worked for me! Thank you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

2022.11: A heck of a release! - Home Assistant Community
I will go back to 2022.10 for now and wait for this change to be reverted or made optional in future releases. PS....
Read more >
unwanted margin appearing out of nowhere, despite being set ...
If an input element whose type attribute is in one of the above states does not have a size attribute, then the user...
Read more >
margin - CSS: Cascading Style Sheets - MDN Web Docs
The margin CSS shorthand property sets the margin area on all four sides of an element.
Read more >
A marginnote inside an equation isn't embedded in the margin ...
A marginnote inside an equation. As can be seen, the margin note is embedded entirely in the text area. Moreover, it overlaps the...
Read more >
margin | CSS-Tricks
The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found