stack-in-card icon indicating copy to clipboard operation
stack-in-card copied to clipboard

Tooltip not visible if out of border

Open McGiverGim opened this issue 4 years ago β€’ 5 comments

Checklist:

  • [x] I updated to the latest version available
  • [x] 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 avatar Apr 16 '20 06:04 McGiverGim

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 avatar Nov 24 '20 04:11 ildar170975

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

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

ildar170975 avatar Mar 13 '21 22:03 ildar170975

Π― Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½ΠΎΠΉ этого вырСзания ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ 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

Anton-Ka avatar May 26 '22 10:05 Anton-Ka

I upvote this solution for input_select as well.

https://github.com/custom-cards/stack-in-card/issues/40#issuecomment-1114349515 Пока Π²ΠΎΡ‚ Ρ‚Π°ΠΊ, со стилСм. Currently we have to use card-mod to prevent clipping.

ildar170975 avatar May 26 '22 12:05 ildar170975

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.

igorsantos07 avatar Jun 23 '24 01:06 igorsantos07