mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 01:46:35 +00:00
Fix overflow of image elements. (#1811)
* Fix overflow of image elements. * Positioning safeguards
This commit is contained in:
parent
028003dffc
commit
0970e1e33c
@ -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>
|
||||||
|
@ -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",
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user