overlap

Question

overlap

xADDRx opened this issue a year ago · comments

xADDRx commented a year ago

HI,

I have the problem that the fields overlap see photo.

Can you change that?Or am I doing something wrong?

neilimixamo · Answer 1 · Wed Jul 19 2023 04:19:52 GMT+0800 (China Standard Time)

Hi @xADDRx, this screenshot doesn't seem to come frome a mobile phone, am I wrong ? Since the layout and design are specifically optimized for mobile usage at the moment, it won't look nice on tablet nor computer. However, if you're using a computer, you can simulate the mobile view by accessing the browser's developer tools (F12) and selecting the "mobile view" option. This will allow you to see the dashboard as it is intended for mobile devices.

xADDRx · Answer 2 · Wed Jul 19 2023 17:03:29 GMT+0800 (China Standard Time)

Hi,

I have the problem in Firefox as well as on my Iphone 11 Pro max.

example from home view:

`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 50vh 4vh 10vh 9vh
grid-template-areas: |
"header"
"subheader"
"main"
"footer_title"
"footer"
"menu"
cards:

type: custom:button-card # HEADER
view_layout:
grid-area: header
template: header
variables:
view: home
type: custom:button-card # SUBHEADER
view_layout:
grid-area: subheader
template: subheader_1
variables:
subheader_1_title: Favorites #can be changed
subheader_1_path: home_favorites
subheader_2_title: Energy #can be changed
subheader_2_path: home_energy
type: custom:layout-card # MAIN
view_layout:
grid-area: main
layout_type: custom:vertical-layout
layout:
height: 50vh
margin: 0vh 0vh 0vh
padding: 0vh 0.4vh
cards:
This is where you can customize this view to fit your system and devices.
- type: custom:button-card # TITLE 1
  template: title_scrollable
  variables:
  title: Group 1 #can be changed
- type: grid
  columns: 2
  square: false
  cards:
  Add you entities here,
  
  I recommend starting by modifying views 2.1 to 7.2 to understand the template and variables process,
  
  Then proceed to adapt this favorite 1.1 view accordingly.
  - type: custom:button-card # ENTITY 01
    template: light #can be replaced with one of these card templates:
    # security
    # security_expandable
    # climate
    # climate_expandable
    # fan
    # fan_expandable
    # light
    # light_expandable
    # cover
    # cover_expandable
    # media
    # media_expandable
    # device
    # device_expandable
    # person
    # person_expandable
    # media
    variables:
    entity: light.standlicht_group
    name: Standlicht #optional, leave blank to keep friendly_name
    label: #optional
    #add additional valid variables for the chosen template.
  - type: custom:button-card # ENTITY 02
    template: light
    variables:
    entity: light.esszimmer
    name: Esszimmer
    label:
  - type: custom:button-card # ENTITY 03
    template: cover
    variables:
    entity: cover.amelia_group
    name: test
    label:
  - type: custom:button-card # ENTITY 04
    template: cover
    variables:
    entity: cover.schlafzimmer_group
    name: Schlafzimmer
    label:
  - type: custom:button-card # ENTITY 05
    template: cover
    variables:
    entity: cover.roller_shutter_3_6
    name: test
    label:
  - type: custom:button-card # ENTITY 06
    template: device
    variables:
    entity: switch.gartenpumpe
    name: Gartenpumpe
    label:
  - type: custom:button-card # ENTITY 07
    template: light #or any other valid template
    variables:
    entity: light.nachtlicht_nancy
    remote:
    name: test
    label:
    #add additional valid variables for the chosen template.
  - type: custom:button-card # ENTITY 08
    template: light #or any other valid template
    variables:
    entity: light.nachtlicht_nancy
    name: test
    label:
    #add additional valid variables for the chosen template.
- type: custom:button-card # TITLE 2
  template: title_scrollable
  variables:
  title: Group 2 #can be changed
- type: grid
  columns: 2
  square: false
  cards:
  - type: custom:button-card # ENTITY 09
    template: security #or any other valid template
    variables:
    entity:
    name:
    label:
    #add additional valid variables for the chosen template.
  - type: custom:button-card # ENTITY 10
    template: cover #or any other valid template
    variables:
    entity:
    name:
    label:
    #add additional valid variables for the chosen template.
  - type: custom:button-card # ENTITY 11
    template: media #or any other valid template
    variables:
    entity:
    name:
    label:
    #add additional valid variables for the chosen template.
  - type: custom:button-card # ENTITY 12
    template: fan #or any other valid template
    variables:
    entity:
    name:
    label:
    #add additional valid variables for the chosen template.
  - type: custom:button-card # ENTITY 13
    template: media #or any other valid template
    variables:
    entity:
    name:
    label:
    #add additional valid variables for the chosen template.
  - type: custom:button-card # ENTITY 14
    template: cover #or any other valid template
    variables:
    entity:
    name:
    label:
    #add additional valid variables for the chosen template.
  - type: custom:button-card # ENTITY 15
    template: cover #or any other valid template
    variables:
    entity:
    name:
    label:
    #add additional valid variables for the chosen template.
  - type: custom:button-card # ENTITY 16
    template: device #or any other valid template
    variables:
    entity:
    name:
    label:
    #add additional valid variables for the chosen template.
type: custom:button-card # FOOTER TITLE
view_layout:
grid-area: footer_title
template: title_sticky
variables:
title: Scenes
type: custom:button-card # FOOTER
view_layout:
grid-area: footer
template: scenes_footer
variables:
scene1_entity: #optional scene.entity
scene1_name: #optional
scene1_background_color: #optional
scene1_icon_color: #optional
scene2_entity: #optional scene.entity
scene2_name: #optional
scene2_background_color: #optional
scene2_icon_color: #optional
scene3_entity: #optional scene.entity
scene3_name: #optional
scene3_background_color: #optional
scene3_icon_color: #optional
scene4_entity: #optional scene.entity
scene4_name: #optional
scene4_background_color: #optional
scene4_icon_color: #optional
scene5_entity: #optional scene.entity
scene5_name: #optional
scene5_background_color: #optional
scene5_icon_color: #optional
type: custom:button-card # MENU
view_layout:
grid-area: menu
template: menu`

neilimixamo · Answer 3 · Thu Jul 20 2023 23:48:09 GMT+0800 (China Standard Time)

There might be an indentation error somewhere, but the way the code is displayed above makes it difficult to read. Could you please provide the code again, properly formatted with indentation like this :

xADDRx · Answer 4 · Fri Jul 21 2023 22:23:58 GMT+0800 (China Standard Time)

Hi,

here is the Code.

1.1_home (v2.0.0).txt

neilimixamo · Answer 5 · Sat Jul 29 2023 17:06:54 GMT+0800 (China Standard Time)

Hi @xADDRx , sorry for the delay, I was able to test your code today but unfortunately without being able to reproduce this display bug. Does this happen systematically in all your views or only with the "home" view?

xADDRx · Answer 6 · Fri Aug 04 2023 04:32:49 GMT+0800 (China Standard Time)

Hi,

Unfortunately in every view :(

neilimixamo · Answer 7 · Wed Aug 09 2023 04:23:06 GMT+0800 (China Standard Time)

Which version of "Button Card @RomRider" are you using ?

Is the problem of overlapping elements still present when you remove the "Group 2" title card and place 16 cards within the first grid card?

overlap

This is where you can customize this view to fit your system and devices.

Add you entities here,

I recommend starting by modifying views 2.1 to 7.2 to understand the template and variables process,

Then proceed to adapt this favorite 1.1 view accordingly.