yeahā¦ here is my octoprint layoutā¦ Lets try to achieve it with stack-in-stack-in-stackā¦ 
Not saying not possible
Not saying not possible
1 Like
weird, I donāt have them anymore, but I also removed the margins for #staging.grid, donāt know if you did that too. To make sure the adapted card is loaded, change the info-text thatās displayed in the browser console too, so you can quickly see if it the changed version got loaded.
Thanks Kris!
Removing margin for #staging.grid did the trick!
Iāll recheck later on my home mac/safari, but on my windows laptop scroll bars are gone!
Iām having a lot of issues with the margins (clipping on top, scrollbars due to margin left and right, etc). I saw that there are some PRs open to fix these. Do you have a time @thomasloven when can we expect to see these merged? 
Hi,
Iām currently trying to use the layout card to create a sidebar on my frontend. Iāve however run into a snag. There are margins between the cards that I would like to get rid of. Best explained with a screenshot where Iāve already identified the culprit thanks to the developer tools of my browser:
Unticking that CSS property does get rid of the margins (in orange in the screenshot), however Iāve not been able to figure out what code would need to go where in order to remove those margins.
My basic config (reduced it so itās readable):
title: Dev
views:
- title: Dev
icon: 'mdi:github'
panel: true
badges: []
path: dev
cards:
- type: 'custom:layout-card'
layout: grid
gridrows: auto
gridcols: 23% 77%
gridgap: 0px
gridplace: stretch
cards:
- !include frontend/sidebar_dev.yaml
- type: 'custom:config-template-card'
gridrow: 1 / 1
gridcol: 2 / 2
entities:
- ...
card:
type: 'custom:swipe-card'
parameters:
effect: 'cube'
cubeEffect:
shadow: false
slideShadows: false
cards:
- !include frontend/dev_rez.yaml
- !include frontend/dev_1er.yaml
Iāve also tried many different combinations combined with a mod-card in which I then configure the above layout-card, but no dice.
As far as my understanding of CSS goes, the correct properties should be inserted somewhere here and not within the included yaml files. Should I be wrong, Iāll gladly post their content as well.
Thanks for any help!
1 Like
Hi Thomas,
Many thanks for your great Lovelace contributions
I try to setup a grid layout with Ā« custom:button-card Ā» and Ā« custom:layout-card Ā». In other word, I would like to achieve a configuration like this HTML table layout (colspan / rowspan)
<table>
<tr>
<th colspan="2" rowspan="2">Date/Clock</th>
<td>btn1</td>
<td>btn2</td>
</tr>
<tr>
<td>btn3</td>
<td>btn4</td>
</tr>
<tr>
<td>btn5</td>
<td>btn6</td>
<td>btn7</td>
<td>btn8</td>
</tr>
</table>
Is there a way to do it without nesting components under other Ā« entitiy Ā» types (to limit indent level)?
Many thanks in advance for advises.
for the moment the best arrangement I was able to do is : a mix of āvertical-stackā and āhorizontal-stackāā¦ I finally donāt try to use any more ālayout-cardā because it was resizing blank button-card (color_type: blank), then i was losing proportion between button5 and button8 if button6/7 are blank!
My solution :
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
icon: 'mdi:clock'
style: 'ha-card { height: 100%; }'
name: clock
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:button-card'
icon: 'mdi:numeric-1-box-outline'
name: button1
- type: 'custom:button-card'
icon: 'mdi:numeric-2-box-outline'
name: button2
- type: horizontal-stack
cards:
- type: 'custom:button-card'
icon: 'mdi:numeric-3-box-outline'
name: button3
- type: 'custom:button-card'
icon: 'mdi:numeric-4-box-outline'
name: button4
- type: horizontal-stack
cards:
- type: 'custom:button-card'
icon: 'mdi:numeric-5-box-outline'
name: button5
- type: 'custom:button-card'
icon: 'mdi:numeric-6-box-outline'
name: button6
- type: 'custom:button-card'
icon: 'mdi:numeric-7-box-outline'
name: button7
- type: 'custom:button-card'
icon: 'mdi:numeric-8-box-outline'
name: button8
1 Like
Hello i want to try using this layout-card but i canāt seem to get a simple 2 card horizontal layout.
Screenshot
Code:
- id: 8
icon: mdi:washing-machine
name: Housekeeping-TEST
cards:
- type: 'custom:layout-card'
layout: horizontal
cards:
#################################################################
# #
# Housekeeping - Laundry Status Card #
# #
#################################################################
- type: entities
style: |
ha-card {
--ha-card-background: rgba(150, 150, 150, 0.2);
--primary-text-color: white;
--secondary-text-color: var(--primary-text-color);
--paper-item-icon-color: white
--width: 200%
}
entities:
- type: 'custom:text-divider-row'
text: Laundry
- type: 'custom:stack-in-card'
cards:
- type: 'custom:button-card'
entity: sensor.washing_machine_status
name: Washing machine
size: '15%'
style:
- font-size: 14px
- type: entities
entities:
- entity: sensor.washing_machine_status
name: Status
- entity: binary_sensor.washing_machine_door
name: Door status
- type: conditional
conditions:
- entity: sensor.washing_machine_status
state : "In use"
card:
type: entities
entities:
- entity: sensor.washing_machine_remaining_time
name: Time remaining
icon: 'mdi-clock'
- entity: sensor.washing_machine_finish_time
- entity: sensor.washing_machine_progress
- entity: sensor.washing_machine_energy_consumption
- entity: sensor.washing_machine_water_consumption
- type: entities
style: |
ha-card {
--ha-card-background: rgba(150, 150, 150, 0.2);
--primary-text-color: white;
--secondary-text-color: var(--primary-text-color);
--paper-item-icon-color: white
--width: 200%
}
entities:
- type: 'custom:text-divider-row'
text: Laundry
- type: 'custom:stack-in-card'
cards:
- type: 'custom:button-card'
entity: sensor.washing_machine_status
name: Washing machine
size: '15%'
style:
- font-size: 14px
- type: entities
entities:
- entity: sensor.washing_machine_status
name: Status
- entity: binary_sensor.washing_machine_door
name: Door status
- type: conditional
conditions:
- entity: sensor.washing_machine_status
state : "In use"
card:
type: entities
entities:
- entity: sensor.washing_machine_remaining_time
name: Time remaining
icon: 'mdi-clock'
- entity: sensor.washing_machine_finish_time
- entity: sensor.washing_machine_progress
- entity: sensor.washing_machine_energy_consumption
- entity: sensor.washing_machine_water_consumption
try to force number of columns
- type: 'custom:layout-card'
layout: horizontal
column_num: 3
cards:
I am using the layout-card, auto-entities, and button-card together and overall is working well. However, as you can see from the card definition below, my title for the ācardā is defined in the horizontal-stack. This is the only way Iāve been able to get a title to appear for the card. The problem is that the title still appears when the list of entities provided by auto-entities is empty. How can I get a title for this that only appears when I have entities?
- type: horizontal-stack
title: Unlocked Doors
cards:
- type: 'custom:auto-entities'
show_empty: false
card:
type: 'custom:layout-card'
column_num: 2
filter:
include:
- domain: lock
options:
type: 'custom:button-card'
layout: vertical
tap_action:
action: toggle
exclude:
- state: locked
coming to you with my very first (close to successful) attempt at a layout config:
# buttons_alerts_layout.yaml
type: custom:layout-card
#layout: horizontal
#min_height: <min_height>
#min_columns: <min_columns>
#max_columns: <max_columns>
column_num: 4
#column_width: <column_width>
#max_width: <max_width>
#min_width: <min_width>
#sidebar_column: <sidebar_column>
#flex_grow: <flex_grow>
#gridcols: <grid_cols>
#gridrows: <grid_rows>
#gridgap: <grid_gap>
#gridplace: <grid_place>
#justify_content: start
rtl: ltr
#card_options:
# <card_options>
cards:
- type: conditional
conditions:
etc etc etc
and card config:
type: conditional
conditions:
- entity: sensor.count_alerts_notifying
state_not: '0'
card:
type: vertical-stack
cards:
- !include /config/lovelace/includes/include_button_marquee_alerts.yaml
- !include /config/lovelace/buttons/buttons_alerts_layout.yaml
needed the rtl: ltr because it would otherwise show the cards from r to l using the default (none) setting.
all in all this seems ok, with 2 gripes: the space between the scrolling button with the alerts, and the 2 live buttons is too small, and the space at the bottom of the 2 live buttons to the next card is too large.
Thought I would have to use some of the justify_content options but I cant seem to influence the position. Would anyone of you know where to begin?
this even spacing between buttons is what I am after:
thanks for having a look!
edit
seems this not yet merged PR takes care of the issue: https://github.com/thomasloven/lovelace-layout-card/pull/97/files
set it to margin-top: -4px; though which fits my needs better:
edit
hmmm, guess the main question is how to have the cards fill from left to rightā¦
update
well fiddling with the margins hasnt got the same effect on all devices. As far as I have noticed especially the iOS app now goes beyond the expected card space when using the adapted margin-left. When using the daytime theme, I do notice some heavy shadowing I cant explain according to my own cards stylings. I fear that is what is causing the margins to be so complex/confusing to set.
Hiā¦,
Could you please to show me your config settings? This exactly what I wantā¦
Do you mean the layout-card configuration, or the UI elements ? Regarding the later, those are all (heavily-modded) button cards.
Have a look at the official doc, itās very well detailed. Once youāve setup your css grid correctly, you can move on with the fancy stuff to make things look good.
Iāve moved on from this type of interface because nowadays, most of my setup is automated and I donāt need the web interface that much. But this was a pretty fun jouney, you should enjoy yours too !
I mean card configuration.
When I resize the screen, cards position rearranged. So all cards on the dashboard always appear complete, not truncated. This is what I want.
Right, in that case, you need a mix of :
- State switch with mediaqueries. Define a breakpoint for various width.
- Lovelace-gen for templating.
Using an include statement & a teamplate, you can create kinda reponsive UIs without having to duplicate your code :
- type: custom:state-switch
entity: mediaquery
states:
"(min-width: {{ _global.breakpoint_desktop }})": !include
- ../03_layouts/layout_plants.yaml
- colNum: 7
alignment: "left"
plantSensors: {{ plantSensors }}
plantDevices: {{ plantDevices }}
"(min-width: {{ _global.breakpoint_tablet }})": !include
- ../03_layouts/layout_plants.yaml
- colNum: 5
alignment: "center"
plantSensors: {{ plantSensors }}
plantDevices: {{ plantDevices }}
"(min-width: {{ _global.breakpoint_mobile }})": !include
- ../03_layouts/layout_plants.yaml
- colNum: 3
alignment: "center"
plantSensors: {{ plantSensors }}
plantDevices: {{ plantDevices }}
"all": !include
- ../03_layouts/layout_plants.yaml
- colNum: 1
alignment: "center"
plantSensors: {{ plantSensors }}
plantDevices: {{ plantDevices }}
Iām relying on globals & jinja variables to keep everything short. You donāt need to do that.
2 Likes
Great, is this your config code to make itās work?
I was read lovelace-gen repository but still confusing how to use that.
Yes, this is my config used to achieved the result you mentionned.
As I said, itās not the easiest nor the most optimal method, but it was entertaining and I guess the outcome looked kinda nice. I suggest you keep reading the doc, and experiment on your side. Thomas Lovenās documentation are very detailed and resourceful, youāll get where you want in the end.
Ok. Thank you for suggestion.
Are you use that ...{{ _global.breakpoint_desktop }}... instead of specific px at min-width section?
