overlap

[xADDRx]

HI,

I have the problem that the fields overlap see photo.

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

[neilimixamo]

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]

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]

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]

Hi,

here is the Code.

1.1_home (v2.0.0).txt

[neilimixamo]

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]

Hi,

Unfortunately in every view :(

[neilimixamo]

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?