Scrolling

[rollover77]

**Sorry, how do I format the code to not appear as one huge block?

My Home Assistant version: 0.90.0

My lovelace configuration method (GUI or yaml):

      media_player.living_room:  # LIVING ROOM MEDIA PLAYER POPUP
        title: Apple TV
        card:
          type: vertical-stack
          cards:
            - type: entities
              entities:
                - type: media-control
                  entity: media_player.living_room
                - type: custom:mini-media-player
                  entity: media_player.sonos
                  more_info: false
                  artwork: full-cover-fit
                  idle_view:
                    when_idle: true
                  hide:
                    power: true
                    name: true
                    controls: true
                    icon: true
                    source: true
                    artwork_border: true 
            - type: picture-elements
              image: /local/images/short-empty.png?v2.2
              elements:
                - type: image # Watch TV Button + STYLE ANCHOR
                  entity: switch.living_room_tv
                  tap_action:
                    action: toggle
                  image: /local/images/remote/tv.svg?v1
                  state_filter:
                    "on": invert(.5) sepia(1) saturate(8) hue-rotate(10deg)
                  style:
                    top: 50%
                    left: 20%
                    # Reuse these values with <<: *style_anchor in the style section for each button
                    <<: &style_anchor
                      width: 2em
                      height: 2em
                      padding: 15px
                      background-color: var(--paper-item-icon-color)
                      border-radius: 50%
                      box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)
                - type: image #Apple TV Button
                  entity: switch.apple_tv
                  tap_action:
                    action: toggle
                  image: /local/images/remote/apple.svg?v1
                  state_filter:
                    "on": invert(.5) sepia(1) saturate(8) hue-rotate(10deg)
                  style:
                    <<: *style_anchor
                    top: 50%
                    left: 50%
                - type: image # Start PS4 Button
                  entity: switch.ps4
                  tap_action:
                    action: toggle
                  image: /local/images/remote/playstation.svg?v1
                  state_filter:
                    "on": invert(.5) sepia(1) saturate(8) hue-rotate(10deg)
                  style:
                    <<: *style_anchor
                    top: 50%
                    left: 80% 
            - type: conditional # Display volume controls when any Activity is on
              conditions:
              - entity: remote.living_room_hub
                state: "on"
              card:
                type: picture-elements
                image: /local/images/short-empty.png?v2.1
                elements:
                - type: image  # Volume Up
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.living_room_hub
                      device: 60032870
                      command: VolumeUp
                  image: /local/images/remote/volup.svg?v1
                  style:
                    <<: *style_anchor
                    top: 50%
                    left: 80%
                - type: image  # Mute
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.living_room_hub
                      device: 60032870
                      command: Mute
                  image: /local/images/remote/mute.svg?v1
                  style:
                    <<: *style_anchor
                    top: 50%
                    left: 50%
                - type: image  # Volume Down
                  tap_action:
                    action: call-service
                    service: remote.send_command
                    service_data:
                      entity_id: remote.living_room_hub
                      device: 60032870
                      command: VolumeDown
                  image: /local/images/remote/voldown.svg?v1
                  style:
                    <<: *style_anchor
                    top: 50%
                    left: 20%

What I am doing: The pop up works great, however some of the content is below the end of the screen and I'm not able to scroll down to see the rest of it. Any suggestions for what I should change? Many thanks

[thomasloven]

I've only recently run into problems with unscrollable popups myself, so I'll take a look at it.

The way to format the code is to put three backticks ` on a new line before and after the code block. I've edited your post, if you edit it you can see what I did.

[Dino-Tech]

Just seeing this. Should popups scroll? If so, I can send codefor example of where it doesn't, but probably not necessary. The only button on my tablet without a pop-up currently. Auto-entities w/all lights and switches. I use navigation instead as a workaround.

[rollover77]

I've only recently run into problems with unscrollable popups myself, so I'll take a look at it.

The way to format the code is to put three backticks ` on a new line before and after the code block. I've edited your post, if you edit it you can see what I did.

Excellent! And good to know, thank you for editing

[kkckkc]

I've created a simple (and hack)y monkey patch to fix the scrolling issue. Can be found at https://gist.github.com/kkckkc/3b34c0d700f3a25aee949f7768d97b46 Simply load as an addtiional custom js.

I don't really know how polymer is supposed to work, so I'm not sure if this works in all cases. Anyhow, it works for me and my needs. It also seem to fix the following issue https://github.com/thomasloven/lovelace-card-tools/issues/23

[wavemaking]

kkckkc, thanks for that patch. Works here as well.

[apop880]

@kkckkc Looks great! I had to add the following line between 23 and 24 to fix the spacing between the X and the title, but it's perfect now:

titleEl.style.paddingLeft = "16px";

Glad to be able to go the monkey patch route for now so that I can run the clean version of the main card-tools script. But I'd love to see this code added to card-tools/popup-card.

[tenkaibr]

It's simple. Just add the following line in the java file:

moreInfo.style.overflowY = 'auto';

Just after "moreInfo = cardTools.popUp(settings.title, card, settings.large || false);"

Like this:

if(e.detail && e.detail.entityId && data[e.detail.entityId]) { let settings = data[e.detail.entityId]; while(settings && typeof settings === "string") settings = data[settings]; if(!settings) return; const card = cardTools.createCard(settings.card); if(cardTools.hass) card.hass = cardTools.hass; moreInfo = cardTools.popUp(settings.title, card, settings.large || false); moreInfo.style.overflowY = 'auto';

I had already requested this change in the other version but it seems to me that they forgot to add in this new

[darkkatarsis]

@tenkaibr @kkckkc After phone rotation this solution stops working

[tenkaibr]

@tenkaibr @kkckkc After phone rotation this solution stops working

What solution are you referring to? Mine is okay. I could not reproduce your issue as you can see below

[darkkatarsis]

Yeah it look nice, unfortunately, the iPhone behaves a little differently. Exactly as if he did not know that the screen orientation changed.

[tenkaibr]

What a strange bug. I've managed to reproduce the problem so it's not the Iphone. Sometimes the popup does not recognize the rotation and cuts the screen.

Maybe I have put the line in the wrong place. Try to put here and take the "Y":

if(settings.style) { let oldStyle = {}; for(var k in settings.style) { oldStyle[k] = moreInfo.style[k]; moreInfo.style.setProperty(k, settings.style[k]); moreInfo.style.overflow = 'auto'; } setTimeout(() =>{ let interval = setInterval(() => { if(moreInfo.getAttribute('aria-hidden')) { for(var k in oldStyle) moreInfo.style.setProperty(k, oldStyle[k]); moreInfo.style.overflow = 'auto'; clearInterval(interval); } }, 100) }, 1000);;

Or maybe add:

moreInfo.style.overflow = 'auto'; moreInfo.style.width= 'auto'; moreInfo.style.height= 'auto';

Since I'm not at home I could not test.

[darkkatarsis]

Nope, still the same. If its possible to implement structure and style as in the example below? I think that would do the trick. Names are just example for CSS styles

<div class="container">
    <div class="inner">
        <div class="body">
            {{ content }}
        </div>
    </div>
</div>

.container {
    pointer-events: auto;
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    left: 0;
    top: 0;
    background-color: transparent;
    z-index: 9999;
    overflow: auto;
    .inner {
        box-sizing: border-box;
        display: inline-block;
        width: 100%;
        .body {
            pointer-events: auto;
            box-sizing: border-box;
            display: inline-block;
            position: relative;
            width: 650px;
            padding: 5px;
            max-width: 100%;
            max-height: 100%;
        }
    }
}

[tenkaibr]

I think I found the solution. At least here I could no longer reproduce the problem. Add the following lines:

      moreInfo.style.overflow = "auto";
      moreInfo.style.maxHeight = "100%";
      moreInfo.style.maxWidth = "100%";    

[darkkatarsis]

I can confirm it now works properly. Thanks  

[Dino-Tech]

@tenkaibr Very interested, do you have an updated version of the popup.js? Thanks and much appreciated!

[klejejs]

Great! Working for me too. Just one question - is it possible to pin the title and "X" o the top when scrolling down?

[tenkaibr]

Great! Working for me too. Just one question - is it possible to pin the title and "X" o the top when scrolling down?

It's a great idea but I can not inject css for this because Home Assistant uses polymer. If I could inject the code below into the "app-toolbar" than would work:

width: 100%; position = sticky; z-index: 20; background-color: #000;

But my knowledge is limited ... maybe someone knows how to inject css in the tag above .

[FindingJohnny]

@tenkaibr @thomasloven should we PR this into the repository as a solution? I'm not sure how much testing has been done, but it certainly seemed to solve the issue for me.

Thanks again @tenkaibr :)

[klejejs]

Worked for me too. I think it can be reported as solution.

[darkkatarsis]

For me too :) Are you planning in the future adding popup card to HACS?