Displaying empty space instead of lovelace custom card

MrBartusek · February 11, 2022, 3:57pm

Hey! I’m the author of MeteoalarmCard and recently I have added the ability to hide the card from the interface when it is not displaying anything useful. The thing that I have tried is just rendering empty string:

return html``;

and it indeed doesn’t display the card but still keeps the default card margin

The problem is although nothing is rendered HA still adds default margin to card

The red box shows the space where custom cards can really operate and the meteoalarm-card container can’t be easily accessed.

The currently used solution is a very sketchy injection to hide the whole card element

github.com

MrBartusek/MeteoalarmCard/blob/4b6f3bdb0b40fe7bafd9ba630db0c57f74c2d98f/src/meteoalarm-card.js#L396-L404

    
      
          				return html`<img src onerror='
          					const parent = this.getRootNode().host.getRootNode().host.shadowRoot;
          					const style = document.createElement("style");
          					style.type = "text/css"
          					style.innerText = "meteoalarm-card:not(:empty) {display: none;}"
          					parent.append(style);
          					console.log(style.parentNode)
          					parent.querySelector("meteoalarm-card").append(document.createElement("div"))
          				'>`;

And it indeed it works as expected. The thing is, as you can imagine, it’s just a buggy mess that’s pain to work with.

So, my question is, is there any proper way to remove this margin? I just feel like card developers should have some easier way to interact with this parent element.

MrBartusek · July 9, 2022, 6:16pm

Hey, that’s me again. I’ve resolved that with this simple function

private setCardMargin(showMargin: boolean): void {
	const container = this.shadowRoot?.host as HTMLElement;
	if(!container) return;
	container.style.margin = showMargin ? '' : '0px';
}

and in render():

// If you want to hide card
this.setCardMargin(false);
return html``;

// If you want to display it again
this.setCardMargin(true);
return html`/* your card */`;