Si. Lo vi, pero no estĆ” identado
Iām using layout-card with auto-entities and button-card. The problem is, when the number of buttons grows, layout-card doesnāt create a 2nd column of buttons. Instead, I wind up with a bunch of buttons that run off the page.
This used to work fine, but broke a few versions ago.
Here is my code:
type: vertical-stack
title: Lighting Scenes
cards:
- type: custom:auto-entities
card:
type: custom:layout-card
layout_type: custom:horizontal-layout
layout:
max_cols: 2
filter:
include:
- entity_id: scene.main_floor*
options:
type: custom:button-card
- entity_id: scene.kitchen*
options:
type: custom:button-card
How can I get the buttons to shrink and render in a 2nd column automatically as needed?
Hi guys iāve been working on creating a sidebar with some simple cards at the side but i canāt figure out how to stop the 2 cards on the left filling the row height to match the longer one on the right.
I want it how it is in this picture, i have tried adding this and it seems to reduce the height but not allow the other card to move up.
card_mod:
style: |
ha-card {
height: auto !important;
}
Iāve also added this style: "ha-card { height: 100%; }" but that doesnāt seem to do anything.
Hopefully one of you can see where iām going wrong.
This is the code for my āclimateā view
Thanks
- title: Climate
panel: true
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 20% 25% 25% 25%
grid-template-rows: auto
grid-template-areas: |
"sidebar main1 main2 main3"
"sidebar main4 main5 main6"
"sidebar main7 main8 main9"
"sidebar main10 main11 main12"
cards:
- !include /config/lovelace/components/tablet_sidebar.yaml
- type: entities
view_layout:
grid-area: main1
entities:
- entity: sensor.system_mode
- entity: sensor.running_state
- entity: sensor.target_temperature
- entity: sensor.boost_remaining
- entity: timer.boost_30
name: test boost
- entity: sensor.current_temperature
- type: custom:mini-graph-card
view_layout:
grid-area: main2
entities:
- entity: sensor.current_temperature
index: 0
name: Weekly Temperature
show_state: true
hours_to_show: 168
points_per_hour: 0.25
show:
labels: true
animate: true
color_thresholds:
- value: 17
color: '#6fa8dc'
- value: 19
color: '#f59f11'
- value: 20
color: '#f39c12'
- value: 20.5
color: '#d35400'
- value: 21
color: '#c0392b'
- type: entities
view_layout:
grid-area: main3
title: Heating Schedule
entities:
- entity: input_datetime.thermsched_01
name: Morning
- type: custom:slider-entity-row
entity: input_number.thermtemp_01
full_row: true
- entity: input_datetime.thermsched_02
name: Mid-Morning
- type: custom:slider-entity-row
entity: input_number.thermtemp_02
full_row: true
- entity: input_datetime.thermsched_03
name: Afternoon
- type: custom:slider-entity-row
entity: input_number.thermtemp_03
full_row: true
- entity: input_datetime.thermsched_04
name: Evening
- type: custom:slider-entity-row
entity: input_number.thermtemp_04
full_row: true
- entity: input_datetime.thermsched_05
name: Weekend
- type: custom:slider-entity-row
entity: input_number.thermtemp_05
full_row: true
- type: custom:simple-thermostat
entity: climate.hive_receiver
view_layout:
grid-area: main4
Hi all,
Layout card is not working as it should and not sure what Im doing wrong.
On my phone its all vertical
And on a PC browser its all horizontal.
Where What Iām trying to do it get the top to be a horizontal boxes for each area
and the lights to show as vertical lines.
Any ideas why even with the same code it displays two separate versions? And how I can get it to display correctly?
button_card_templates: !include_dir_merge_named minimalist-templates/
views:
- icon: phu:double-spot
cards:
- type: 'custom:layout-card'
layout: custom:horizontal-layout
cards:
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Living Room
color: purple
entity: input_select.room_lights
icon: 'phu:rooms-living'
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Bedroom
color: purple
entity: input_select.room_lights
icon: 'phu:rooms-bedroom'
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Bathroom
color: purple
entity: input_select.room_lights
icon: 'phu:rooms-bathroom'
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Kitchen
color: purple
entity: input_select.room_lights
icon: 'mdi:countertop-outline'
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Liqing's Bathroom
color: purple
entity: input_select.room_lights
icon: 'phu:rooms-bathroom'
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Hall
color: purple
entity: input_select.room_lights
icon: 'phu:rooms-hallway'
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Laundry
color: purple
entity: input_select.room_lights
icon: 'mdi:washing-machine'
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Study
color: purple
entity: input_select.room_lights
icon: 'phu:printer-3d-nozzle'
- type: 'custom:button-card'
template: vertical_buttons_custom_state
variables:
state: Balcony
color: purple
entity: input_select.room_lights
icon: 'phu:rooms-terrace'
- type: 'custom:layout-card'
layout: custom:vertical-layout
cards:
- type: custom:state-switch
entity: input_select.room_lights
states:
Bedroom:
type: 'custom:layout-card'
layout: custom:horizontal-layout
cards:
- type: 'custom:button-card'
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name: Hall Strip
entity: light.bedroom_hall_strip
- type: 'custom:button-card'
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name: Bedroom Strip
entity: light.bedroom_strip
- type: 'custom:button-card'
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name: Bedside Lamp
entity: light.bedside_lamp
- type: 'custom:button-card'
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name: Small Bedroom Hall Lamp
entity: light.small_bedroom_hall_lamp
- type: 'custom:button-card'
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name: Bedroom Hall Lamp
entity: light.bedroom_hall_lamp
- type: 'custom:button-card'
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name: Bedroom Light
entity: light.bedroom_light_1
- type: 'custom:button-card'
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name: Bedroom Hall Light
entity: light.bedroom_hall_light
- type: 'custom:button-card'
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name: Bedroom Black Light
entity: light.bedroom_black_light
Kitchen:
type: horizontal-stack
cards:
- type: 'custom:button-card'
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name: Kitchen Lights
entity: light.kitchen_lights
Iām making some progress with this. My header and buttons along the left are appearing where I intend them to, but Iām still unsure why my center and right grid-template areas are getting bumped to the bottom of the view, rather than taking their place:
```
- title: Main
background: center / cover no-repeat url("/local/images/background2.jpg") fixed
path: main_front_door_tablet
icon: mdi:home-outline
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 100px 1fr 1fr
grid-template-rows: 100px repeat(7, 1fr)
grid-template-areas: |
āheader header headerā ābuttons center rightā ābuttons center rightā
ābuttons center rightā ābuttons center rightā ābuttons center rightā
ābuttons center rightā ābuttons center rightā
badges: []
cards:
- type: vertical-stack
view_layout:
grid-area: header
cards:
- type: custom:digital-clock
dateFormat:
weekday: long
day: 2-digit
month: long
timeFormat:
hour: 2-digit
minute: 2-digit
- type: vertical-stack
view_layout:
grid-area: buttons
cards:
- type: custom:button-card
name: Home
color_type: label-card
color: rgba(7, 103, 215)
icon: mdi:home
styles:
card:
- width: 85px
- height: 85px
tap_action:
action: navigate
navigation_path: /front-door-tablet/main_front_door_tablet
- type: custom:button-card
name: Weather
color_type: label-card
color: rgba(51, 72, 111, 0.24)
icon: mdi:weather-partly-cloudy
styles:
card:
- width: 85px
- height: 85px
tap_action:
action: navigate
navigation_path: /front-door-tablet/weather_front_door_tablet
- type: custom:button-card
name: Lights
color_type: label-card
color: rgba(51, 72, 111, 0.24)
icon: mdi:lightbulb
styles:
card:
- width: 85px
- height: 85px
tap_action:
action: navigate
navigation_path: /front-door-tablet/lights_front_door_tablet
- type: custom:button-card
name: Calendar
color_type: label-card
color: rgba(51, 72, 111, 0.24)
icon: mdi:calendar-clock
styles:
card:
- width: 85px
- height: 85px
tap_action:
action: navigate
navigation_path: /front-door-tablet/calendar_front_door_tablet
- type: custom:button-card
name: Cameras
color_type: label-card
color: rgba(51, 72, 111, 0.24)
icon: mdi:video
styles:
card:
- width: 85px
- height: 85px
tap_action:
action: navigate
navigation_path: /front-door-tablet/camera_front_door_tablet
- type: custom:button-card
name: Pool
color_type: label-card
color: rgba(51, 72, 111, 0.24)
icon: mdi:pool
styles:
card:
- width: 85px
- height: 85px
tap_action:
action: navigate
navigation_path: /front-door-tablet/pool_front_door_tablet
- type: custom:button-card
name: Mail
color_type: label-card
color: rgba(51, 72, 111, 0.24)
icon: mdi:mailbox
styles:
card:
- width: 85px
- height: 85px
tap_action:
action: navigate
navigation_path: /front-door-tablet/mail_front_door_tablet
- type: vertical-stack
view_layout:
grid-area: center
cards:
- type: custom:weather-card
entity_weather: weather.dark_sky
entity_sun: sun.sun
entity: weather.dark_sky
name: null
- type: iframe
url: >-
xxxxxxx-weather-site
aspect_ratio: 60%
- type: vertical-stack
view_layout:
grid-area: right
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: lock.front_door_lock
template: standard
name: Front Door
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- width: null
- height: 80px
state:
- value: locked
icon: mdi:lock
color: rgb(0, 128, 0)
- value: unlocked
icon: mdi:lock-open
color: rgb(255, 0, 0)
- type: custom:button-card
entity: lock.garage_entry_door_lock_current_lock_mode
template: standard
name: Garage Entry Door
tap_action:
action: toggle
hold_action:
action: more-info
styles:
card:
- width: null
- height: 80px
state:
- value: locked
icon: mdi:lock
color: rgb(0, 128, 0)
- value: unlocked
icon: mdi:lock-open
color: rgb(255, 0, 0)
- type: horizontal-stack
cards:
- type: custom:button-card
entity: cover.garage_door_1
template: standard
name: Garage Door 1
tap_action:
action: more-info
hold_action:
action: toggle
styles:
card:
- width: null
- height: 80px
state:
- value: closed
icon: mdi:garage
color: rgb(0, 128, 0)
- value: open
icon: mdi:garage-open
color: rgb(255, 0, 0)
- value: opening
icon: mdi:garage-alert
color: rgb(255, 255, 0)
- value: closing
icon: mdi:garage-alert
color: rgb(255, 255, 0)
- type: custom:button-card
entity: cover.garage_door_2
template: standard
name: Garage Door 2
tap_action:
action: more-info
hold_action:
action: toggle
styles:
card:
- width: null
- height: 80px
state:
- value: closed
icon: mdi:garage
color: rgb(0, 128, 0)
- value: open
icon: mdi:garage-open
color: rgb(255, 0, 0)
- value: opening
icon: mdi:garage-alert
color: rgb(255, 255, 0)
- value: closing
icon: mdi:garage-alert
color: rgb(255, 255, 0)
```
I see there are a few questions on here lately that have gone unanswered. Hopefully I can get some guidance as I plug away at this some more. Thanks in advance!
EDIT: added a better imageā¦
EDIT 2: Iāve noticed a few different notations for the grid layout, and they seem to be used interchangeably. Neither is working for me:
</s> <s>type: custom:grid-layout</s> <s>layout:</s> <s> grid-template-columns: 100px 1fr 1fr</s> <s> grid-template-rows: 100px repeat(7, 1fr)</s> <s>
ā¦and:
</s> <s>type: custom:layout-card</s> <s>layout_type: grid</s> <s>layout:</s> <s> grid-template-rows: 100px repeat(7, 1fr)</s> <s> grid-template-columns: 100px 1fr 1fr</s> <s>
I notice the difference in the View Configuration UI under Settings, but otherwise, there appears to be no difference. I donāt know which one I should be using, since both deliver the same result.
EDIT, again: Iāve made progress! My problem was trying to put everything into a single vertical stack card. Iāve got some things to work out, but itās looking much betterā¦
Using grid mode, is it possible to make a column the full height of the viewport? Iām looking to replicate something like the sidebar in this example whereby the bottom icons are at the bottom of the deviceās display.
This is for use on a tablet only so I could just cheat and using manual padding on the cards to force them to the right place, but I was hoping there was a more elegant way of achieving this.
Hello,
I am trying to implement a very simple layout. Unfortunately programming is not my thing. When I see templates I can adapt them with luck but now Iām on the wrong path. I do not know where to put which code to implement 3 columns ( 20% 40% 40%). Please help me where I have to
which code. Thanks
+1.
Cast no longer appears to work with layout-card or a modified lovelace format. Just casts a white screen. Any idea why?
If I first turn on casting with Lovelace configured to use the default Masonry view, (which obviously works) then change to the Layout-card format while itās already casting, it works and displays my 4 column setup. However, casting will not begin if the layout is set to layout-card to begin with.
Iāve been looking for 3 evenings on the custom:layout-card. I have installed this resource via HACS and have struggled through the manual several times but I keep getting stuck on the grid component that just doesnāt do what I expect it to do.
When I use the code in Dwain Scheerenās tutorials, I have a discrepancy between my result and the example in the manual:
type: custom:layout-card
layout_type: vertical
column_width: 100%
cards:
- type: markdown
content: '# Grid'
- type: custom:layout-card
layout: grid
gridrows: 180px 200px auto
gridcols: 180px auto 180px
cards:
- type: glance
entities:
- sun.sun
gridrow: 1 / 2
gridcol: 1 / 2
style: 'ha-card { height: 100%; }'
- type: entities
entities: &ref_0
- light.wc
- light.vestiaire
- light.keuken_d
gridrow: 1 / 3
gridcol: 2 / 4
style: 'ha-card { height: 100%; }'
- type: markdown
content: test
gridrow: 2 / 4
gridcol: 1 / 2
style: 'ha-card { height: 100%; }'
- type: entities
entities: *ref_0
gridrow: 3 / 4
gridcol: 2 / 3
This is the resut:
This is the expected result:
Could somebody give me a tip or guide me in the right direction, please?
Thanks in advance and best regards.
Hi,
When I use the grid layout, there is always 4px right and lift margins.
Is there anyway to control those margins?
#root {
display: grid;
margin-left: 4px;
margin-right: 4px;
justify-content: stretch;
}
Yes, but you will need to install card-mod for that, wrapping the layout card in a mod-card and applying the styles to the mod-card.
Hey,
I actually tried, with no success.
Probably I am not setting the correct CSS path.
I have finally managed, this way:
- type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
#root {
margin: 0 !important;
}
card:
type: custom:layout-card
layout_type: grid
layout_options:
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
grid-gap: 0px 4px
mediaquery:
"(max-width: 450px)":
grid-template-columns: 1fr 1fr
cards:
I was just about to provide you with my code examples (was out getting food this morning). Congratulations on figuring it out !!!
1 Like
Do you think same will be possible when using custom layout to define the type of view?
Maybe inside theme fileā¦
I honestly donāt know. Perhaps someone on the card-mod theme thread can help you out.
Also succeeded.
Here is the code in theme file, for who even might need.
card-mod-view-yaml: |
grid-layout$: |
#root {
margin-left: 0 !important;
margin-right: 0 !important;
}
2 Likes
Hi everyone,
I am trying to make mediaquery work properly on iOS.
I have the following code:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto repeat(8, 43px) 43px 43px
grid-template-areas: |
"base eight seven six five four three two one alarm profile"
mediaquery:
"(max-device-width: 650px)":
grid-template-columns: auto repeat(3, 43px)
grid-template-areas: |
"base message alarm profile"
and in my cards I have something like this:
view_layout:
show:
mediaquery: "(max-width: 650px)"
This should show me 4 columns on a small screen and 11 columns on a large screen. This seems to work perfectly fine on my browsers, android phones and large iphones (though it might be that it is an iOS thing).
I have an iPhone 11 pro max that shows this perfectly fine (iOS 14 if Iām correct, they are not mine so canāt really tell atm, nor can I update them). I also have an iPhone X with iOS 13.5 and it shows all the items regardless of mediaquery rules. Is there anyone that knows if support was added in later iOS versions or if Iām simply missing something?
Thanks!
Sure with 650? afaik max-device-width is more than 650 on iphone x. Perhaps you should add more on this (portrait, landscape, ā¦).
I know, but I have literally tried everything with this (so add portrait, adding pixel ratio, changing width to 2000px etc etc.) It all works fine on all devices but some iPhones and iPads.
But someone was able to help, it seems this depends on iOS version.
I got 2x iPhone X now, one with iOS 13.5 and one with iOS 15.4 and the latter works perfectly fine. So probably it is a feature that was added to iOS later on.
Edit: todays layout-card update did make it slightly better, but still not hiding elements.