Closed hAMMERlized closed 1 year ago
Vertical spacing in sections is defined at the beginning of each view like this :
To include the footer section within the main section, you need to modify the layout in this way :
layout:
margin: -0.5vh 1vh 0vh
grid-template-columns: auto
grid-template-rows: 19.5vh 5.5vh 4.6vh 61.4vh 9vh
grid-template-areas: |
"header"
"subheader"
"main_title"
"main"
"menu"
The main section also has an additional particularity: you need to specify its new height (61.4vh) lower down in the configuration :
- type: custom:layout-card # MAIN
view_layout:
grid-area: main
layout_type: custom:vertical-layout
layout:
height: 61.4vh
margin: 0vh 0vh 0vh
padding: 0vh 0.4vh
I can see in your screenshot that you left empty vertical space between multiple cards, and I assume you would like to display a title there. This can be easily achieved by adding a "title_scrollable" template card at the desired location within the MAIN section:
- type: custom:layout-card # MAIN
view_layout:
grid-area: main
layout_type: custom:vertical-layout
layout:
height: 61.4vh
margin: 0vh 0vh 0vh
padding: 0vh 0.4vh
cards:
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card # ENTITY 01
template:
variables:
entity:
name:
label:
- type: custom:button-card # ENTITY 02
template:
variables:
entity:
name:
label:
- type: custom:button-card # TITLE
template: title_scrollable
variables:
title:
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card # ENTITY 03
template:
variables:
entity:
name:
label:
- type: custom:button-card # ENTITY 04
template:
variables:
entity:
name:
label:
Your main cards appear with a shorter height compared to mine. As I'm still curious about the default view that each user may have, could you please confirm if you intentionally reduced their size for practicality?
Thanks once again for your help. Scrollbar works now like a charm. As you've mentioned right I wanted to use some titles between the entities and wit your code it works as expected. I was still doing some trial and error but couldn't achieve to get it at the right place.
Button Card is still new to me and I am trying to dive deeper and deeper into it :)
Your main cards appear with a shorter height compared to mine. As I'm still curious about the default view that each user may have, could you please confirm if you intentionally reduced their size for practicality?
No worrys, your code is all right. I just tweaked the cards and layout a bit to get a view that I like. Personally I like it clean (like your dashboard already is) and more or less compact with displaying "important" infos at the main page without the need of diving deeper as needed into the dashboards subviews. But that's just my personal expectation.
I have just one problem. As the first title in the main part is "static" it is not hiding while scrolling through the entities.
Tried to put the title code snippet to the right place but so far I couldn't handle it. Hope you know what I mean.
Best Regards, Sebastian
Ok, I see, to replace the first sticky title by a scrollable one, you will need to modify the layout again by incorporating the space reserved for the "main_title" within the "main" section. Additionally, add "Anwesenheit" title as the first item within the "main" section, like this :
layout:
margin: -0.5vh 1vh 0vh
grid-template-columns: auto
grid-template-rows: 19.5vh 5.5vh 66vh 9vh
grid-template-areas: |
"header"
"subheader"
"main"
"menu"
Then :
- type: custom:layout-card # MAIN
view_layout:
grid-area: main
layout_type: custom:vertical-layout
layout:
height: 66vh #################### IMPORTANT
margin: 0vh 0vh 0vh
padding: 0vh 0.4vh
cards:
- type: custom:button-card # TITLE 01
template: title_scrollable
variables:
title: Anwesenheit
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card # ENTITY 01
template:
variables:
entity:
name:
- type: custom:button-card # ENTITY 02
template:
variables:
entity:
name:
- type: custom:button-card # TITLE 02
template: title_scrollable
variables:
title: Klima
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card # ENTITY 03
template:
variables:
entity:
name:
- type: custom:button-card # ENTITY 04
template:
variables:
entity:
name:
This will become the default view in the 2.0.0 update as I believe it will be more practical.
Thank you. Works perfectly. Loving it!
Sorry to repost this closed issue but I have another little problem. I am now at the light_bulbs_room1.yaml
.
I can't get the title and the chevron at the same row. Is there a new code snippet needed or just a matter on where to put the code? Thanks.
if Wohnzimmer corresponds to the subheader area, add the chevron code after (native) line 34 and replace grid-area: main_title
with grid-area: subheader
and replace bottom: 0.3vh
with top: 1vh
like this :
- type: custom:button-card # CHEVRON-LEFT
view_layout:
grid-area: subheader
icon: mdi:chevron-left
color: var(--chevron-color)
size: 65%
styles:
card:
- background: transparent
- box-shadow: none
- border-radius: 50%
- height: 4.6vh
- width: 4.6vh
- left: 82vw
- top: 1vh
tap_action:
action: navigate
navigation_path: 'light_bulbs'
I am using subheader
neither. I only use header
, meain
and menu
. That's my code inside the yaml file so far:
title: lights_bulbs_room1 #change "room1" by your room name path: light_bulbs_room1 #change "room1" by tour room name icon: mdi:lightbulb theme: Quick Look Mobile background: "white" type: custom:grid-layout layout: margin: -0.5vh 1vh 0vh grid-template-columns: auto grid-template-rows: 19.5vh 71.5vh 9vh grid-template-areas: | "header" "main" "menu" cards:
type: custom:button-card # HEADER view_layout: grid-area: header template: header variables: view: light
type: custom:layout-card view_layout: grid-area: main layout_type: custom:vertical-layout layout: height: 71.5vh margin: 0vh 0vh 0vh padding: 0vh 0.4vh cards:
type: grid columns: 2 square: false cards:
By the way how can i embed the code like you did?! Sorry for being such an idiot :/
Great, I can see that you have a good understanding of the layout concept.
It's true that whitout subheader or main_title sections, the placement of the chevron in the main section will appear as a separate card positioned below the scrollable title. (By the way, I assume that you still want to include a scrollable title before placing the light cards, as shown in your screenshot)
The workaround for this issue would be adding - position: absolute
to the chevron code in order to achieve the desired layout :
title: lights_bulbs_room1 #change "room1" by your room name
path: light_bulbs_room1 #change "room1" by tour room name
icon: mdi:lightbulb
theme: Quick Look Mobile
background: "white"
type: custom:grid-layout
layout:
margin: -0.5vh 1vh 0vh
grid-template-columns: auto
grid-template-rows: 19.5vh 71.5vh 9vh
grid-template-areas: |
"header"
"main"
"menu"
cards:
- type: custom:button-card # HEADER
view_layout:
grid-area: header
template: header
variables:
view: light
- type: custom:layout-card # MAIN
view_layout:
grid-area: main
layout_type: custom:vertical-layout
layout:
height: 71.5vh
margin: 0vh 0vh 0vh
padding: 0vh 0.4vh
cards:
- type: custom:button-card # TITLE
template: title_scrollable
variables:
title: Wohnzimmer #can be changed
- type: custom:button-card # CHEVRON-LEFT
icon: mdi:chevron-left
color: var(--chevron-color)
size: 65%
styles:
card:
- background: transparent
- box-shadow: none
- border-radius: 50%
- height: 4.6vh
- width: 4.6vh
- left: 82vw
- bottom: 0.3vh
- position: absolute
tap_action:
action: navigate
navigation_path: 'light_bulbs'
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card # ENTITY 01
template: light
variables:
entity: light.wohnzimmer_hugo_links #requires light.entity
name: Hugo links #optional
- type: custom:button-card # ENTITY 02
template: light
variables:
entity: light.wohnzimmer_hugo_rechts
name:
- type: custom:button-card # ENTITY 03
template: light
variables:
entity: light.wohnzimmer_sofa
name: Sofa
Hope it will do the trick.
PS : you can add code like this
Thanks once again for your help. Seems as I still have to learn so much 🤦🏼♂️.
By the way is there any way to support you somehkw or sending you some kind of refund like ko-fi
, paypal
or whatever?
Oh, support via Buy Me A Coffee would be highly appreciated, thank you!
I have added the button to the GitHub description.
Thanks. Done!
Amazing ! Thank you @hAMMERlized
Hi @neilimixamo,
I am sorry for digging out that issue again but since I am using qlm v2 I have the following problem.
Don't know how exactly explain it but it seems that my dashboard itself isn't "sticky". I can scrole the main area as expected but also scrole the whole dashboard up and down a bit. I am pretty sure I hadn't this behavior with the v1 dashboard.
This is my code so far:
title: home_favorites
path: home_favorites
icon: mdi:home
theme: Quick Look Mobile
background: "var(--theme)"
type: custom:grid-layout
layout:
margin: -0.5vh 1vh 0vh
grid-template-columns: auto
grid-template-rows: 19.5vh 7.5vh 73vh
grid-template-areas: |
"header"
"subheader"
"main"
cards:
##############
### HEADER ###
##############
- type: custom:button-card
view_layout:
grid-area: header
template: header
variables:
view: home
#################
### SUBHEADER ###
#################
- type: custom:button-card
view_layout:
grid-area: subheader
template: subheader_1
variables:
subheader_1_title: Favoriten #can be changed
subheader_1_path: home_favorites
subheader_2_title: Räume #can be changed
subheader_2_path: home_energy
############
### MAIN ###
############
- type: custom:layout-card
view_layout:
grid-area: main
layout_type: custom:vertical-layout
layout:
height: 73vh
margin: 0vh 0vh 0vh
padding: 0vh 0.4vh
cards:
########################
### TITEL 1: KAMERAS ###
########################
- type: custom:button-card
template: title_scrollable
variables:
title: Kameras
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card
template: camera
variables:
entity: camera.eingang_main
name: []
label: []
- type: custom:button-card
template: camera
variables:
entity: camera.garten_main
name:
label:
######################
### TITEL 2: KLIMA ###
######################
- type: custom:button-card
template: title_scrollable
variables:
title: Klima
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card
template: climate_expandable
# security
# security_expandable
# climate
# climate_expandable
# fan
# fan_expandable
# light
# light_expandable
# cover
# cover_expandable
# media
# media_expandable
# device
# device_expandable
# person
# person_expandable
variables:
entity: climate.wohnzimmer_klima
name: Wohnzimmer
label: #optional
temperature_overrider: sensor.wohnzimmer_temp_luft_temperature #add additional valid variables for the chosen template.
- type: custom:button-card
template: climate_expandable
variables:
entity: climate.lilly_klima
name: Lilly
label:
temperature_overrider: sensor.lilly_temp_luft_temperature
- type: custom:button-card
template: climate_expandable
variables:
entity: climate.schlafzimmer_klima
name: Schlafzimmer
label:
temperature_overrider: sensor.schlafzimmer_temp_luft_temperature
- type: custom:button-card
template: climate_expandable
variables:
entity: climate.badezimmer_klima
name: Badezimmer
label:
temperature_overrider: sensor.badezimmer_temp_luft_temperature
- type: custom:button-card
template: climate_expandable
variables:
entity: climate.mila_klima
name: Mila
label:
temperature_overrider: sensor.mila_temp_luft_temperature
# PLATZHALTER #
- type: custom:button-card
name:
styles:
card:
- background-color: transparent
- filter: opacity(0%)
#########################
### TITEL 3: APPLE TV ###
#########################
- type: custom:button-card
template: title_scrollable
variables:
title: Apple TV
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card
template: media
variables:
entity: media_player.wohnzimmer_apple_tv
name: Wohnzimmer
label:
- type: custom:button-card
template: media
variables:
entity: media_player.schlafzimmer_apple_tv
name: Schlafzimmer
label:
#######################
### TITEL 4: WASSER ###
#######################
- type: custom:button-card
template: title_scrollable
variables:
title: Wasser
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card
template: water
variables:
entity: switch.pool_sandfilteranlage
name: Sandfilter
label:
- type: custom:button-card
template: water
variables:
entity: switch.pool_warmepumpe
name: Wärmepumpe
label:
- type: custom:button-card
template: water
variables:
entity: switch.schuppen_brunnenpumpe
name: Brunnen
label:
- type: custom:button-card
template: water
variables:
entity: switch.dachboden_zirkulationspumpe
name: Warmwasser
label:
- type: custom:button-card
template: security
variables:
entity: lock.flur_eg_haustur_lock
name: Haustür
label:
lock: lock.flur_eg_haustur_lock
lock_battery: sensor.flur_eg_haustur_battery
Hi @hAMMERlized, if the dashboard becomes scrollable, it means that vertical content exceeds the parent container height which shouldn't be more than 100vh.
It is difficult for me to pinpoint the exact source that exceeds in height, but since the code of the view shown above seems correct, I suggest you to check the heights of each template card that integrates into this view. You'll probably need to experiment through a few trial and error, but the explanation lies in an excessive height.
Well I have checked all template cards which are used on the home view and compared it with your original code without luck.
I can even reproduce that behavior with your original dashboard code. See pictures below.
Is the dashboard still scrollable when native header is hidden through Browser Mod ?
Maybe you should send me your actual dashboard files privately on https://community.home-assistant.io/, I'll try to find where the issue comes from.
Is the dashboard still scrollable when native header is hidden through Browser Mod ?
Unfortunately it is still scrollable.
Maybe you should send me your actual dashboard files privately on https://community.home-assistant.io/, I'll try to find where the issue comes from.
Thanks for the offer but it seems i can not upload any folders or yaml files in the private message. If you would contact me per mail at
assistant2703@gmail.com
i would you send the files per mail. Thanks!
Hey @neilimixamo mate,
sorry for spamming you so hard lately but I can't find the code I have to edit / delete to make the thing work like I would like to.
As I am not using scenes manually and I don't need the toolbar at the bottom I would like to enlarge the scrollable area at the "Home" section, or maybe even at some other sections too, not sure. Maybe I am going to use it in a other kind of way. Okay anyway...
How do I delete the footer area / enlarge the scrollable area as there would be more space for some entities displaying without scrolling.
Thanks... again 😄