Enlarge scrollable area

Question

Enlarge scrollable area

hAMMERlized opened this issue a year ago · comments

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 😄

neilimixamo · Answer 1 · Mon Jun 26 2023 15:53:01 GMT+0800 (China Standard Time)

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?

hAMMERlized · Answer 2 · Mon Jun 26 2023 16:39:56 GMT+0800 (China Standard Time)

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

neilimixamo · Answer 3 · Mon Jun 26 2023 16:51:42 GMT+0800 (China Standard Time)

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.

hAMMERlized · Answer 4 · Mon Jun 26 2023 18:15:20 GMT+0800 (China Standard Time)

Thank you. Works perfectly. Loving it!

hAMMERlized · Answer 5 · Tue Jun 27 2023 04:21:48 GMT+0800 (China Standard Time)

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.

neilimixamo · Answer 6 · Tue Jun 27 2023 07:40:43 GMT+0800 (China Standard Time)

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'

hAMMERlized · Answer 7 · Tue Jun 27 2023 08:11:42 GMT+0800 (China Standard Time)

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: custom:button-card # CHEVRON-LEFT
  view_layout:
  grid-area: main
  icon: mdi:chevron-left
  color: darkgrey
  size: 65%
  styles:
  card:
  - background: transparent
  - box-shadow: none
  - border-radius: 50%
  - height: 4.6vh
  - width: 4.6vh
  - left: 82vw
  - bottom: 0.3vh
  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
    label_on: #optional
    label_off: #optional
  - type: custom:button-card # ENTITY 02
    template: light
    variables:
    entity: light.wohnzimmer_hugo_rechts
    name: Hugo rechts
    label_on: true
    label_off:
  - type: custom:button-card # ENTITY 03
    template: light
    variables:
    entity: light.wohnzimmer_sofa
    name: Sofa
    label_on:
    label_off: true

By the way how can i embed the code like you did?! Sorry for being such an idiot :/

neilimixamo · Answer 8 · Tue Jun 27 2023 16:06:44 GMT+0800 (China Standard Time)

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

hAMMERlized · Answer 9 · Tue Jun 27 2023 16:12:53 GMT+0800 (China Standard Time)

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?

neilimixamo · Answer 10 · Tue Jun 27 2023 17:04:25 GMT+0800 (China Standard Time)

Oh, support via Buy Me A Coffee would be highly appreciated, thank you!

I have added the button to the GitHub description.

hAMMERlized · Answer 11 · Tue Jun 27 2023 20:44:11 GMT+0800 (China Standard Time)

Thanks. Done!

neilimixamo · Answer 12 · Tue Jun 27 2023 21:58:29 GMT+0800 (China Standard Time)

Amazing ! Thank you @hAMMERlized

hAMMERlized · Answer 13 · Sat Jul 15 2023 02:49:21 GMT+0800 (China Standard Time)

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

neilimixamo · Answer 14 · Sat Jul 15 2023 04:20:52 GMT+0800 (China Standard Time)

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.

hAMMERlized · Answer 15 · Sat Jul 15 2023 05:53:46 GMT+0800 (China Standard Time)

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.

neilimixamo · Answer 16 · Sat Jul 15 2023 06:45:40 GMT+0800 (China Standard Time)

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.

hAMMERlized · Answer 17 · Sat Jul 15 2023 07:14:44 GMT+0800 (China Standard Time)

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!