Scrolling
rollover77 opened this issue · comments
**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
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.
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.
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
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 thomasloven/lovelace-card-tools#23
kkckkc, thanks for that patch. Works here as well.
@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.
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
Yeah it look nice, unfortunately, the iPhone behaves a little differently. Exactly as if he did not know that the screen orientation changed.
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.
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%;
}
}
}
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%";
I can confirm it now works properly. Thanks
@tenkaibr Very interested, do you have an updated version of the popup.js? Thanks and much appreciated!
Great! Working for me too. Just one question - is it possible to pin the title and "X" o the top when scrolling down?
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 .
@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 :)
Worked for me too. I think it can be reported as solution.
For me too :) Are you planning in the future adding popup card to HACS?