Is it just me or is the way Lovelace organises cards a bit of a mess? I can never understand how to get my cards to layout how I want them.
I have struggled with vertical-stack till I am blue in the face but almost every time I try I can never get it to work as I would expect. For example (but this is not the only case) if I have a card followed by a vertical stack followed by a card I rarely seem to get three columns.
Please can we have some kind of control over card placement - surely that is kind of required when designing a front end UI? (And yes, I know about the layout-card).
My latest battle is with three cards that I would expect to layout in a horizontal line across the screen but no, they insist on being in a vertical column. Can someone please explain how this works?
title: Public Transport
icon: mdi:train
cards:
- type: custom:compact-custom-header
#================
#=== Underground
#================
- type: custom:auto-entities
config for card here
#======================
#=== xxxxxxxxxx Trains
#======================
- type: custom:config-template-card
config for card here
- type: entity-button
config for card here
Iâm just finding my entire Lovelace seems to be getting more and more custom cards, which just feels a bit wrong, despite how brilliant they are, and in any case this is just a simple three card view which according to the ârulesâ should display as three horizontal cards across my screen.
The whole point of lovelace was to give users the ability to easily use custom cards and separate the UI from the state machine. You should have seen customUI in the old interface⊠ugly! That being said, you should use that card because you can trick lovelace into thinking they need to be side by side.
Yes I get all that and donât get me wrong, I think Lovelace from a high level perspective is brilliant and the custom cards never cease to amaze me - I use loads of them. But it is all very frustrating at best and useless at worst if we have no (built-in) control over where things appear on the screen, and in this particular case no apparent rhyme nor reason as to why it is the way it is.
I suppose I am really asking, âwhy do I have to trick Lovelace?â
If you check out that custom card that @VDRainer linked, it explains exactly how the cards are currently moved around on the screen. There is rhyme and reason to how the cards are placed and sized. You can override the attributes that drive the placement with that custom card.
EDIT: Actually, it appears he removed the explanation of how cards are placed in lovelace. Let me see if I can find it.
I have read that explanation in the past (but if is interesting he seems to have removed it) and I realise that there is really rhyme and reason, this is after all computer programming, everything happens for a reason .
I am just very confused about my specific example of three cards appearing in a column not a row.
If you use the custom card and drop this value to 1, it should separate your columns:
<min height>
Optional. Default: 5
The number of units needed before a column is considered not empty.
Every item has a unit height. When that unit height for the column gets to 5, it places the next item in the next column. A unit is about 50 pixels in height if I remember correctly, but some cards can override that. Some cards also donât have dynamic heights. If they are collapsed when first added, theyâll be treated as the collapsed height.
How does this custom card layout tool work when you switch to mobile? So if I tell it to put three cards on the first row will it try and maintain that with mobile and squish? Iâve played with taking individual cards and merging them into a single card so to speak with horizontal-stack and vertical-stack but on mobile it wasnât pretty. Then tried tablet mode and that wasnât pretty on mobile either unless you turned the phone sideways.
.