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

Tooltip not visible if out of border #5

Open
2 tasks done
McGiverGim opened this issue Apr 16, 2020 · 5 comments
Open
2 tasks done

Tooltip not visible if out of border #5

McGiverGim opened this issue Apr 16, 2020 · 5 comments
Labels
bug Something isn't working

Comments

@McGiverGim
Copy link

Checklist:

  • I updated to the latest version available
  • I cleared the cache of my browser

Release with the issue:
0.1.0

Last working release (if known):
None

Browser and Operating System:
Chrome and Windows 10, Android

Description of problem:
The tooltip of some cards (like history, for example) cuts if outside borders. This does not happen with the default vertical-stack
image

Javascript errors shown in the web inspector (if applicable):
None

Additional information:

@McGiverGim McGiverGim added the bug Something isn't working label Apr 16, 2020
@ildar170975
Copy link

Have to confirm this.

  1. Just a history-graph - tooltip is displayed properly:
type: history-graph
entities:
  - entity: sun.sun
hours_to_show: 72
refresh_interval: 0

изображение

  1. history-graph inside a vertical-stack - tooltip is displayed properly:
type: vertical-stack
cards:
  - type: entities
    entities:
      - sun.sun
  - type: history-graph
    entities:
      - entity: sun.sun
    hours_to_show: 72
    refresh_interval: 0

изображение

  1. history-graph inside a stack-in-card - tooltip is clipped:
type: 'custom:stack-in-card'
cards:
  - type: entities
    entities:
      - sun.sun
  - type: history-graph
    entities:
      - entity: sun.sun
    hours_to_show: 72
    refresh_interval: 0

изображение

@ildar170975
Copy link

I think the reason of this clipping may be a CSS style "overflow: hidden" for the 'stack-in-card':
изображение
So the workaround is using card-mod:

  - type: 'custom:stack-in-card'
    style: |
      ha-card {
        overflow: visible !important;
      }
    cards:
      - type: history-graph
        entities:
          - sun.sun
        hours_to_show: 6
        refresh_interval: 0

изображение

@Anton-Ka
Copy link

Anton-Ka commented May 26, 2022

Я думаю, что причиной этого вырезания может быть стиль CSS «переполнение: скрытый» для «стека в карте»: поэтому обходным путем является использование карты-мод

  - type: 'custom:stack-in-card'
    style: |
      ha-card {
        overflow: visible !important;
      }
    cards:
      - type: history-graph
        entities:
          - sun.sun
        hours_to_show: 6
        refresh_interval: 0

I upvote this solution for input_select as well.
Without using card_mod it looks like this:
image

After changing the styles, everything works correctly:
image

@ildar170975
Copy link

ildar170975 commented May 26, 2022

I upvote this solution for input_select as well.

#40 (comment)
Пока вот так, со стилем.
Currently we have to use card-mod to prevent clipping.

@igorsantos07
Copy link

It kinda feels this project is abandoned as well... This is a very simple issue, but it also looks like that overflow was added by the author for some reason, given the other cards don't have that style rule.

I should point that, even though while editing the card_mod change could cause scrollbars, they don't happen in the dashboard.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants