@kodaris/krubble-components 1.0.44 → 1.0.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +8 -8
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +17 -2
- package/dist/button/button.js.map +1 -1
- package/dist/krubble-components.bundled.js +17 -2
- package/dist/krubble-components.bundled.js.map +1 -1
- package/dist/krubble-components.bundled.min.js +32 -32
- package/dist/krubble-components.bundled.min.js.map +1 -1
- package/dist/krubble-components.umd.js +17 -2
- package/dist/krubble-components.umd.js.map +1 -1
- package/dist/krubble-components.umd.min.js +2 -2
- package/dist/krubble-components.umd.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -533,13 +533,28 @@
|
|
|
533
533
|
if (dropdown) {
|
|
534
534
|
const hostRect = this.getBoundingClientRect();
|
|
535
535
|
dropdown.style.top = hostRect.bottom + 4 + 'px';
|
|
536
|
+
dropdown.style.bottom = '';
|
|
536
537
|
dropdown.style.left = hostRect.left + 'px';
|
|
538
|
+
dropdown.style.right = '';
|
|
537
539
|
dropdown.style.minWidth = hostRect.width + 'px';
|
|
538
|
-
|
|
540
|
+
dropdown.style.transformOrigin = 'top left';
|
|
539
541
|
const dropdownRect = dropdown.getBoundingClientRect();
|
|
542
|
+
// Open above if dropdown overflows viewport bottom
|
|
543
|
+
if (dropdownRect.bottom > window.innerHeight) {
|
|
544
|
+
dropdown.style.top = '';
|
|
545
|
+
dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px';
|
|
546
|
+
dropdown.style.transformOrigin = 'bottom left';
|
|
547
|
+
}
|
|
548
|
+
// Align right if dropdown overflows viewport right
|
|
540
549
|
if (dropdownRect.right > window.innerWidth) {
|
|
541
550
|
dropdown.style.left = '';
|
|
542
551
|
dropdown.style.right = window.innerWidth - hostRect.right + 'px';
|
|
552
|
+
if (dropdownRect.bottom > window.innerHeight) {
|
|
553
|
+
dropdown.style.transformOrigin = 'bottom right';
|
|
554
|
+
}
|
|
555
|
+
else {
|
|
556
|
+
dropdown.style.transformOrigin = 'top right';
|
|
557
|
+
}
|
|
543
558
|
}
|
|
544
559
|
}
|
|
545
560
|
});
|
|
@@ -820,7 +835,7 @@
|
|
|
820
835
|
padding: 8px 0;
|
|
821
836
|
z-index: 10000;
|
|
822
837
|
display: none;
|
|
823
|
-
transform-origin: top;
|
|
838
|
+
transform-origin: top left;
|
|
824
839
|
}
|
|
825
840
|
|
|
826
841
|
.dropdown--opened {
|