Metrology-for-Hass icon indicating copy to clipboard operation
Metrology-for-Hass copied to clipboard

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

Open caraar12345 opened this issue 3 years ago • 2 comments

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

caraar12345 avatar Jan 23 '23 10:01 caraar12345

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)
            }

zanix avatar Jan 23 '23 22:01 zanix

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 ?

jsenecal avatar Jul 24 '23 00:07 jsenecal