šŸ”¹ Layout-card - Take control of where your cards end up

@Thomas, I love this card, it really allows to control layout of my dashboards effectively. It has one flaw thoughā€¦ for very complex views the code grows very quickly and starts to be hardly manageable. My most complex one have now 1500+ lines of code and for obvious reason cannot be managed via UI.
So thinking of it, I come up with idea, that perhaps could be implemented in layout card 2.0 :slight_smile:
What about taking approach similar to card-mod; having grid defined on the views: level and letting card position itself only by adding something like layout: gridrow/gridcol that woul dbe recognized by layout-card, similarly as style: option can be added to any card and is handled by card-mod? This would allow to create layout/grid on entire view level but allow cards to be treated individually, thus avoiding creation of large code blocks.

Thanks Thomas. That did it. Appreciate your help.

Hi.
Great idea, which unfortunately have turned out to not be entirely straight forward to implement.
I may revisit it sometime soon, though. I know a lot more now than the last time I tried.

Great to hear. And I suppose you found out about the importance of the panel parameter too? :wink:

does layout-card not support background image?? i got the following, but canā€™t get background image to work https://pastebin.com/vPE7U9Kz

https://github.com/thomasloven/lovelace-card-mod#mod-card

New HA update broke this card inside HA app on Android. Get custom element does not exist.

Works fine in browser

2 Likes

Looks like itā€™s nabu casa cloud where it doesnā€™t work. Auto entities have the same

I have the same problem on my ipad with the HA app. I get the error message ā€œcustom element does not exist: layout-cardā€. Sometimes the porblem is gone after many refreshes. The browser / android app do not have this problem.

Wouter

Same problem here with IPad 10.3.4 firmware and also stack-in-card custom card, same behaviourā€¦

Hereā€™s something for you to try.
Any card you have a problem with; take the contents of the JS file and paste it into the left side here:


Make sure to check ES2015 under presets.
Then take what pops up in the right side, and paste into a new .js file and add that to your lovelace resources instead. Make sure to remove the old one and to use a new file name to avoid caching issues.

For example, if i copy and paste layout-card.js, do i need to create a new file with the result in the right side and save to /local/community/layout-card/ with a different name and then put the new name in resources?

Save it to <hass-config>/www/whatever.js and add /local/whatever.js to the resources.

I tried it and actually the new layout-card.js is finally working also on my IPad, but discovered too many other cards are not working with IOS so i need to convert many cards to the new formatā€¦ Is it worth of to convert all the cards and put them available to HACS?

Seeing as the process roughly doubles the file size, Iā€™d rather avoid it.

Hmmm in this way how to have always the latest release after conversion?

Hey! Is there a way how to add other CSS grid properties? Right now I would like to use justify-items but itā€™s not available.

You can do pretty much anything you want with CSS using card-mod.

OK thanks, that can work too!

Maybe Iā€™m saying something crazy but could there be an implementation to parse key value to css?

I think it would help keeping our YAML file cleaner with less nested cards.

Oh, right. I forgot youā€™d need mod-card for layout-cardā€¦ Thatā€™s not a pretty solution.
Iā€™ll see what I can do.

2 Likes