Progress bar always shows 100%

iko3 commented 3 months ago

Describe the bug I'm using iPad for home dashboard and progress bar is not displayed correctly there. Same page looks fine on computer. Its an old iPad running iOS 12.5 so I suspect it might be that built-in browser doesn't work same way as in newer iOS.

Your card configuration

  - type: custom:timer-bar-card
    entity: sensor.washing_machine_timer
    bar_height: 50px
    active_state: running
    bar_background: rgb(255,152,0,0.1)
    bar_foreground: rgb(255,152,0)
    layout: full_row
    invert: true
    text_width: 0px
    show_empty: true

Debug information Below are screenshot from how it looks on iPad vs PC browser:

rianadon commented 3 months ago

It looks as if the card above is spilling into the timer bar. I don't have an old iPad like you do, so this would be pretty difficult for me to debug. The issue could be either in that card above or the timer card. iOS 12 probably includes a really old Safari that doesn't support some of the styling that the browser is applying to the card.

One fix that might work is to use card-mod to add some extra margin to the top of the timer bar card. For instance:

type: custom:timer-bar-card
...
card_mod:
  style: |
    ha-card {
      margin-top: 40px;
    }

It'll add space in both browsers, but if you tune the margin so that the timer bar is pushed just below the top card it hopefully won't be too much of a bother.

iko3 commented 3 months ago

Yeah, I can find the solution to cards overlapping, but the problem is that progress bar always stays at 100% on iPad

rianadon / timer-bar-card

Progress bar always shows 100% #139