Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dashboard elements not shown correct #331

Closed
4 tasks done
Phoenix-DH opened this issue Dec 29, 2023 · 5 comments
Closed
4 tasks done

Dashboard elements not shown correct #331

Phoenix-DH opened this issue Dec 29, 2023 · 5 comments

Comments

@Phoenix-DH
Copy link

My Home Assistant version: 2023.12.4

My lovelace configuration method (GUI or yaml): yaml

What I am doing:
Nothing, just updated all components to latest

What I expected to happen:
Positions will remain the same

What happened instead:
Positions of elemts mobed

Description:
To be honest, I am not pretty sure if the issue is related to this, but since updating this I got the error in position of the elements, but only on some devices with various browsers or apps.

The still correct one is the HA app on my old iPad:
IMG_0094

The not working example is from the Safari browser on the same iPad, but Ingot the same on all my Safari browsers or HA app on Android tablets:
IMG_0095

Issue is visible on the lower left corner of the images.


By putting an X in the boxes ([]) below, I indicate that I:

  • Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

  • Have made sure I am using the latest version of the plugin.

  • Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

  • Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

@thomasloven
Copy link
Owner

Issue template said:

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

# End of code

@Phoenix-DH
Copy link
Author

Phoenix-DH commented Dec 29, 2023

This is the responsible code:

######################### Minigraph to show temperature inside and out #########################

  - type: "custom:mini-graph-card"
    entities:
      - sensor.gartentreppe_temperature
      - sensor.esszimmer_temperature
    show:
      icon: true
      legend: false
      name: true
    color_thresholds:
      - color: "#4dd2ff"
        value: 10
      - color: "#ffa31a"
        value: 15
      - color: "#ff1a1a"
        value: 20
    icon: "mdi:home-thermometer-outline"
    style: |
      :host {
        left: 11.6%;
        top: 92.9%;
        width: 23.5%;
        overflow: hidden;
        height: 15%;
        background: none  !important;
        box-shadow: none !important;
      }
      .header {
        font-size: 1vw;
        position: absolute !important;
        width: 5% !important;
        padding: 0 !important;
        right: 20% !important;
        top: 15% !important;
      }
      ha-card {
        background: none  !important;
        padding: 0 !important;
      }
      .icon > ha-icon {
        width:1.8vw !important;
        height:1.8vw !important;
      }
      .state__time{
        font-size:0.9vw !important;
        margin-top: 0.2vw;
        font-weight: 300 !important;
        opacity: 0.4 !important;
      }
      .states {
        font-size: 0.5vw !important;
        padding: 1vw 0vw 0vw 0vw  !important;
        margin: auto !important;
        width: 68%;
      }
    tap_action:
      action: navigate
      navigation_path: /lovelance-floorplan/klima

######################### Mini Weather card #########################

  - type: "custom:simple-weather-card"
    backdrop: false
    entity: weather.openweathermap
    name: " "
    style: |
      :host {
        left: 11.4%;
        top:  85.5%;
        width: 17%;
        height: 7% !important;
        overflow: hidden;
        height: 8.5vw;
        background: none  !important;
        box-shadow: none !important;
        font-size: 1vw !important;
      }
      ha-card {
        background: none  !important;
        box-shadow: none !important;
        flex-flow: row-reverse !important;
        padding: 0 !important;
      }
      .weather__info--add{
        display : none !important;
      }
      .weather__info{
        flex-grow: 1;
        min-height: 0 !important;
        height: 2.4vw;
        margin-left: 0.6vw;
      }
      .weather__icon{
        margin-right:0.5% !important;
        margin-top: -3%;
        width: 2vw !important;
        height: 2vw !important;
        flex: 0 0 2vw !important;
      }
    tap_action:
      action: navigate
      navigation_path: /lovelance-floorplan/wetter

@ildar170975
Copy link
Contributor

This is not MINIMAL code.
Besides , it is not formatted as a code. Check other issues as examples, or use the “create new issue” template.

@ildar170975
Copy link
Contributor

You are using two custom cards here.
Suggest to check in corresponding repos first before reporting a “bug”.

@thomasloven
Copy link
Owner

See #332

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants