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

Data in more info popup doesn't scroll when it overflows #59

Open
caraar12345 opened this issue Jan 23, 2023 · 2 comments
Open

Data in more info popup doesn't scroll when it overflows #59

caraar12345 opened this issue Jan 23, 2023 · 2 comments

Comments

@caraar12345
Copy link

Heyo! Bit of a weird bug that I've seen recently with Metrology.

The first screenshot shows the OpenWeatherMap more info popup at a normal size, with the weather for Wednesday at 3pm showing outside the bottom of the panel. It's not possible to scroll to see any more.

The second screenshot shows the same popup but zoomed out so everything fits within the box again; that's the only way to see everything

@zanix
Copy link
Contributor

zanix commented Jan 23, 2023

This is probably the result of fixing tooltips causing the more info popup to overflow #51
You can remove these lines from metro.yaml but then tooltips will cause the container to show scrollbars if the tooltip goes outside of the popup.

      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface,
      .mdc-dialog .mdc-dialog__content {
        overflow: visible;
      }

Alternatively, if you remove these sections, you lose the blur on the popup window and the coloring on the history graph chart, but the overflow and tooltips will work properly.

      @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
        .mdc-dialog__surface {
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          background-color: rgba(var(--rgb-mdc-theme-surface), .5) !important;
        }
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface,
      .mdc-dialog .mdc-dialog__content {
        overflow: visible;
      }
    ha-more-info-history$state-history-charts:
      $:
        state-history-chart-timeline$: |
          .chartTooltip {
            margin-top: -200px;
          }
    ha-more-info-info:
      $:
        ha-more-info-history:
          $: |
            state-history-charts, statistics-chart {
              filter: hue-rotate(calc(var(--hue-primary-color) - 212deg)) saturate(3) brightness(0.66)
            }

@jsenecal
Copy link

jsenecal commented Jul 24, 2023

How about letting it overflow but hiding the scrollbars in a way similar to what I did here: https://github.com/netbox-community/netbox/blob/41d6caa5ef0c954eca18fdc3eef1f02be6648929/netbox/project-static/styles/netbox.scss#L112-L123 ?

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