Hi janick, many thanks for your reply but not quite what Iām after in terms of rendering. Definitely hits the mark with the blank position though.
I donāt want the cards across a row to look they are cards. With the base Entities card there is no discernible card style rendering of the rows.
So a row of two columns showing temperature sensor values:
<icon> Inside 22 <icon> Outside 16
8 minutes ago 20 minutes ago
just appears like a nicely formatted table and not two entities with bevelled boxes.
Many thanks for your suggestion.
Essentially I want it to function and display exactly like the native Entities Card except allow columns.
So a column count of 1 would be no different to the native Entities Card. A column count of 2 would place the second nominated entity to the right of the first nominated entity etc.
Other than the columnar layout, no different presentation to native Entities Card.
Iāll cobble a picture together tomorrow.
Iām not sure if this will achieve exactly what you want, but you can do something like this with native entities cards, and vertical and horizontal stack cards.
In this case, you would probably want to use card-mod to remove the background on the āchildā entities cards, and maybe reduce the padding too. Itās pretty easy to do, but if you adopt this approach, let me know if you need code examples.
Hi Chris,
Many thanks.
This sounds like what I am trying to achieve but canāt get back to it for a week or so to give it a try.
Iāll need to figure out how to leave a blank position for a child entity.
Iāll check out the hui-element card but Iād love to get a coding example. Iām not very experienced with CSS.
Thanks, Todd.
Using card-mod to remove background and box-shadow, and reduce the padding from the default 16px on an entities cards would look something like this (you need to set the padding separately for the title area, and for the main content area):
Hereās a screenshot combining the code from my 2 posts (with default theme, and default column width within a layout-card set as custom-vertical-layout for the whole dashboard view):
Recently started with the layour-card and Iām puzzled by the following.
I use the layout card to control the width of a grid card. In the grid card there are 4 columns each containing a button-card that it 200px wide. The total width of the grid card is 836px (apparently there is 12px space between the columns).
To fit this in the layout card I need to specify a width of 560ā¦ almost precisely 2/3 of 836.
Iād like to have the layout work like the horizontal but vertically. Vertical option doesnāt seem to do what I mean as it just puts all cards in one long column. I want the cards to be added to each column at the bottom until they would end up below the fold, then add to a new column. In theory I could force this with layout-break cards but the issue is I want the break to depend on the height of the screen. Is there a way to do this?
Sorry if this was already covered in this thread, I tried searching but didnāt find anything.
What a great Tool! I managed to define a (responsive) Header-Layout, awesome!
But in Grid-Layout, is there a Way to define that all later coming Cards are either treated in a different Layout (e.g. Mansory)? Or at least define āfrom Row 4 on, always use xxxxā?
By now, i have it set up like this:
When playing around with Content, it is rather annoying to always add/edit the view_layout.
There is the Workaround by using a Vertical-Stack Card. But i do have already nested Stack Cards, it gets really confusing.
So, is there an Option i missed to āfor all Cards after āsubā use following Layout?ā
Hi @thomasloven
Thanks for this great card, iāve used it to create this tablet dashboard below.
I have some slider cards that open some conditional cards but as you can see from the screenshots if one of the cards is longer it extends the sidebar .
Which way would you recommened to fix the resoluton or even keep the sidebar fixed and have the right hand side produce a scroll bar
Thanks
Steve
And it works almost perfectly, but I cannot force the charts in the main area to occupy the whole width of the area. The only way I can make the charts bigger is by specifying an absolute width in the vertical layout properties, but itās not right and breaks smaller displays like a smartphone.
Any ideas? Or perhaps Iām using the grid layout incorrectly in the first place? I mean, what if there is a way to stack cards in the grid without using inner vertical layouts?
Sorry if Iām giving you information you already know: I see youāre using the core horizontal-stack cards successfully - have you tried using core vertical-stack cards instead of the āinnerā layout-cards?
Is it possible to define a background color for a ācustom:layout-cardā with a āgridā?
I am using a grid within a vertical-stack and I would like this grid card to have a background color (but I donāt want to color the grid areas but rather the parent).
Maybe I should be giving the second row of the vertical-stack the background color, but I would have thought I can give this to the grid card.
type: vertical-stack
cards:
- type: custom:button-card
.
.
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 2fr 1fr 1fr 1fr
grid-template-rows: 1
grid-template-areas: |
"main1 main2 main3 main4" # basically this row should have a background color spaning the entire row
cards:
- type: entities
