jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 17:56:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix overflow of image elements. (#1811)

Browse Source 
* Fix overflow of image elements.

* Positioning safeguards
This commit is contained in:
Thomas Lovén 2018-10-19 10:41:08 +02:00 committed by Paulus Schoutsen
parent 028003dffc
commit 0970e1e33c
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/panels/lovelace/elements/hui-image-element.js
View File

@ -14,10 +14,10 @@ class HuiImageElement extends ElementClickMixin(PolymerElement) {
<style> <style>
:host(.clickable) { :host(.clickable) {
cursor: pointer; cursor: pointer;
overflow: hidden;
-webkit-touch-callout: none !important; -webkit-touch-callout: none !important;
} }
hui-image { hui-image {
overflow-y: hidden;
-webkit-user-select: none !important; -webkit-user-select: none !important;
} }
</style> </style>

10
src/panels/lovelace/mixins/element-click-mixin.js
View File

@ -21,13 +21,15 @@ export default dedupingMixin(
let ripple = null; let ripple = null;
const rippleWrapper = document.createElement("div"); const rippleWrapper = document.createElement("div");
this.shadowRoot.appendChild(rippleWrapper); this.parentElement.appendChild(rippleWrapper);
Object.assign(rippleWrapper.style, { Object.assign(rippleWrapper.style, {
position: "absolute", position: this.style.position || "absolute",
width: isTouch ? "100px" : "50px", width: isTouch ? "100px" : "50px",
height: isTouch ? "100px" : "50px", height: isTouch ? "100px" : "50px",
top: "50%", top: this.style.top,
left: "50%", left: this.style.left,
bottom: this.style.bottom,
right: this.style.right,
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
pointerEvents: "none", pointerEvents: "none",
}); });