How would I set the columns based on the browser width? I think it would involve using media queries, but whatâs the right syntax?
How can I reduce the indentation between columns and rows, and around the card, and reduce the height of the row? Tried all possible options, no result.
1 Like
I am usually able to learn what I need over google, trial and error but I cant seem to grasp grid layout and controlling column width. here is an example of what I want. skinny first column and wide 2nd column. no help from discord, reddit or fb, except this screenshot. please help me with this
Loving this card, makes it so easy to place my card exactly where I want!
However, there is something that is baffles meâŚ
For my mobile dashboard Iâm ordering my cards vertically, and all the cards behave as youâd imagine - neatly stacked vertically. My last/bottom card is a map that shows the location of my phone. But, it only show the title (âP6 locationâ), and not the map itself.
If I navigate to another app location (for ex. settings) and come back, the map shows upâŚ
This only happens on the mobile using the Android companion app, if I look at this dashboard on my laptop the map shows up correctly.
Edit: the same things happens on desktop too, if I set my mobile dashboard as default - the map doesnât show up. Navigating to another area on the sidebar and going back to the dashboard makes the map show up.
What could be the issue?
Hi all, I belief it has been mentioned before but, I canât seem to find an actual fix. Iâm using this card to create a 2 column wide screen (monitor is vertically mounted) but it seems that the History-graph is not updating anymore.
This may be too much to ask, but is there a way to achieve all of the below in one layout without modyfing the cards themselves?
- Two columns
- Stretch cards to column width
- Limit card height to x % of screen resolution
I tried using width and max_cols but widthis also applied to my mobile view and then messes everything up. Plus the height of the cards was not adjusted in any way, so the cards were scaled proportionally.
While I do want the font to remain proportional, I would like to keep the rest of the card limited in height.
This is primarily because I have different kinds of charts of which I cannot adjust the chart height.
Hi, is it possible to have 2 cards in a 1/3, 2/3âs of page format? Currently I have these cards taking up half of the space each. The below is what I have but Iâd like the first card to be 1/3 and the second card to be 2/3 of the width.
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: vertical
cards:
Think weâre in desperate need of card drag&drop, with point&click resizing.
I personally will learn anything to get my stuff working and organized, even Java if it comes to that, just donât make me get into this CSS 50% 100% and the other split-stack vertical-orbital bullshit.
3 Likes
Hi,
i have built a popup for the lights in my hallway with two buttons (Motion sensor control), some brightness control and scenes.
The problem i have is i just canât figure out how to align the buttons on the left in the middle from top to bottom.
I looked at the CSS guide and found
align-content but didnât get it to work. A Complete Guide to Grid | CSS-Tricks - CSS-TricksThis is the complete code for the popup.
Does
align-content work with layout card or do i need something else?
action: fire-dom-event
browser_mod:
command: popup
title: Flur Licht
style:
.: |
:host .content {
width: calc(385px + 385px);
max-width: 90vw;
}
layout-card:
$grid-layout$:
hui-entities-card:
$: |
.card-content {
padding: 1.5em 1.5em 1.5em 1.5em;
}
ha-card {
animation: border 1s forwards;
border-radius: 0;
}
@keyframes border {
0%, 100% {
border-right: 1px solid rgba(0, 0, 0, 0.3);
}
}
/* phone */
@media screen and (max-width: 800px) {
ha-card {
animation: none;
}
}
$hui-horizontal-stack-card$: |
#root {
justify-content: space-evenly;
margin-top: 1.5em;
margin-left: 0.8em;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 30% 70%
grid-template-rows: 1fr
grid-template-areas: |
"turn control"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 40% 60%
grid-template-rows: 1fr
grid-template-areas: |
"turn control"
cards:
#################################################
# #
# turn #
# #
#################################################
- type: entities
view_layout:
grid-area: turn
align-content: center
entities:
- type: custom:button-card
entity: input_boolean.flur_bewegungssensor_condition
name: Bewegungssensor
template:
- base
icon: mdi:motion-sensor
show_state: false
- type: custom:gap-card
- type: custom:button-card
entity: input_boolean.flur_bewegungssensor_condition
template:
- base
icon: phu:motion-sensor
#################################################
# #
# Control #
# #
#################################################
- type: entities
view_layout:
grid-area: control
entities:
- type: custom:light-popup-card
entity: light.beleuchtung_flur
icon: none
fullscreen: false
brightnessWidth: 130px
brightnessHeight: 360px
borderRadius: 1.7em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
displayType: slider
actionSize: 4.5em
actionsInARow: 2
actions:
- action: call-service
service: light.turn_on
color: '#d8d9e1'
service_data:
entity_id: >
[[[ return entity.entity_id ]]]
color_temp: 153
- action: call-service
service: light.turn_on
color: '#d5b08d'
service_data:
entity_id: >
[[[ return entity.entity_id ]]]
color_temp: 326
- action: call-service
service: hue.hue_activate_scene
service_data:
group_name: Beleuchtung Flur
scene_name: none
color: '#AB6F1F'
- action: fire-dom-event
image: >-
data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
50 50"%3E%3Cstyle%3Esvg%7Bbackground:radial-gradient(circle,rgba(255,255,
255,1) 0%25,rgba(255,255,255,0) 80%25),conic-gradient(%237827e6,%23e622e7,
%23e40588,%23e41919,%23e5691e,%23e8e22e,%237de629,%2334e828,%2333e75c,
%2334e8e0,%23207de5,%231227e5,%237827e6)%7D%3C/style%3E%3C/svg%3E
browser_mod:
command: popup
title: >
[[[ return entity.attributes.friendly_name ]]]
card:
type: custom:light-entity-card
entity: >
[[[ return entity.entity_id ]]]
brightness: true
color_temp: true
white_value: true
full_width_sliders: false
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
persist_features: true
consolidate_entities: true
Itâs amazing how much i hate anthing to do with css.
been a backend developer for 15 years now and iâm self taught in c# c++, vb, js and javaâŚ
and still i can for the life of me not even create a footer in css even though i dabbled with it every now and then during thease 15 years⌠it just makes no senseâŚ
what i want to do is set my footer to âstickâ to bottom of screen and always be there.
if the middle columns (âleftâ & ârightâ grid areas) are to large they should be scrollable instead
here is the code for my test dashboard:
title: Kämpendahl
views:
- theme: Backend-selected
type: custom:grid-layout
title: home
path: home
layout:
grid-template-columns: 50% 50%;
grid-template-rows: 80px 1fr 80px;
grid-template-areas: |
"header header"
"left right"
"footer footer"
badges: []
cards:
- type: glance
entities:
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
view_layout:
grid-area: header
- type: entities
entities:
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
view_layout:
grid-area: left
card_mod:
style: |
ha-card {
#overflow: auto;
#height: 100px;
}
- type: entities
entities:
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
view_layout:
grid-area: right
- show_name: true
show_icon: true
show_state: true
type: glance
entities:
- sensor.time
- sensor.date
- sensor.disk_use_percent_home
view_layout:
grid-area: footer
I am finding it a difficult to understand the css-grid layout.
I did however find an CSS Grid Generator which made it so easy to define my grid. It appears that it generates CSS but not in the same format shown on the Layout-Card examples.
Does anyone know how I can add this to my HA?
Website: Interactive CSS Grid Generator | Layoutit Grid
Output:
.container { display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 1.4fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"header"
"."
".";
}
.header { display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"header-left header-right";
grid-area: header;
}
.header-right {
align-self: center;
grid-area: header-right;
}
.header-left {
align-self: center;
grid-area: header-left;
width: 100%;
height: 100%;
}
Hi everyone, I have such a card (of which I am attaching the code). I would like the background to be unique among all three cards, how is this possible?
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 15% 70% 15%
grid-template-rows: auto
grid-template-areas: |
"header header header"
"main main2 main3"
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:home
picture: |-
{% if is_state('person.alessio', 'home')%}
/local/utenti/Foto_profilo_Alessio.jpg
{% else %}
/local/utenti/Foto_profilo_Alessio_B-W.jpg
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
fill_container: true
layout: vertical
badge_icon: |-
{% if is_state('person.alessio', 'home')%}
mdi:home
{% else %}
mdi:home-off
{% endif %}
badge_color: |-
{% if is_state('person.alessio', 'home')%}
green
{% else %}
red
{% endif %}
entity: person.alessio
icon_color: ''
- type: custom:mushroom-template-card
primary: |+
{{states('sensor.pretty_date')}}
secondary: |
{{states('sensor.time')}}
icon: ''
picture: ''
layout: vertical
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:home
picture: |-
{% if is_state('person.davide', 'home')%}
/local/utenti/Foto_profilo_Davide.jpg
{% else %}
/local/utenti/Foto_profilo_Davide_B-W.jpg
{% endif %}
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
fill_container: true
layout: vertical
badge_icon: |-
{% if is_state('person.davide', 'home')%}
mdi:home
{% else %}
mdi:home-off
{% endif %}
badge_color: |-
{% if is_state('person.davide', 'home')%}
green
{% else %}
red
{% endif %}
entity: person.davide
icon_color: ''
I would like to limit the maximum height of my grid layout to the size of my tablet screen - to remove all possibilities of vertical scrolling.
Is there any way to do this?
Something like setting âheightâ in the layout doesnât seem to work, the layout still extends vertically further down the screen:
type: custom:grid-layout
title: Main
icon: mdi:home-outline
path: 0
layout:
height: 1024
grid-column-gap: "2%"
grid-template-columns: "repeat(3, 1fr)"
grid-template-areas: |
"rooms chips chips"
"rooms persons climate"
"rooms cover media"
"rooms power devices"
cards: !include_dir_list "areas/"
Hi all
Iâm trying to make a media âcardâ out of three separate instances, so that it looks how I want it to. The issue is that there is obviously gaps inbetween the separate card instances.
Is there anyway to remove these vertical and horizontal gaps between the three cards, so that it visually appears to be all one card?
Thanks!
I have removed some of the code below to make it easier to read:
type: custom:layout-card
layout_type: grid
cards:
- type: custom:mini-media-player
entity: media_player.kitchen
....
style: |
ha-card {
height: 100px;
}
view_layout:
grid-area: media1
- type: custom:mini-media-player
entity: media_player.kitchen
....
style: |
ha-card {
height: 100px;
}
view_layout:
grid-area: media2
- type: custom:mini-media-player
entity: media_player.kitchen
....
style: |
ha-card {
height: 100px;
}
view_layout:
grid-area: media3
layout:
grid-template-columns: 400px 100px
grid-template-rows: auto
grid-template-areas: |
"media1 media2"
"media3 media3"
margin: '-4px 4px -4px -4px'
padding: 0
card_margin: 0
Did you find a solution for this?
What card is that your using for the rooms?
I installed this card using hacs and i get this error in the page:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading âoptionsâ)
I tried on both ha devices i have and i get the same error.
Also, in the View Configuration i dont see the Masonry (layout-card) option, but i see the message " You have layout-card installed which adds some options to this dialog.
Please see layout-card on github for usage instructions."
Can anyone help me?
2022.10.x added the âSubviewâ function which changed something which now doesnât allow the layout-card views to be displayed in the UI. All the layout-card functions appear to be available and still work, but everything needs to be defined manually in yaml.
1 Like
It works when manually defined.
Thank you!
Hey there. Love what youâve done with your dashboard. Any chance you could share your YAML?