@kodaris/krubble-components 1.0.73 → 1.0.74
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 +3 -3
- package/dist/button/button.d.ts.map +1 -1
- package/dist/button/button.js +14 -2
- package/dist/button/button.js.map +1 -1
- package/dist/krubble-components.bundled.js +14 -2
- package/dist/krubble-components.bundled.js.map +1 -1
- package/dist/krubble-components.bundled.min.js +2 -1
- package/dist/krubble-components.bundled.min.js.map +1 -1
- package/dist/krubble-components.umd.js +14 -2
- package/dist/krubble-components.umd.js.map +1 -1
- package/dist/krubble-components.umd.min.js +133 -132
- package/dist/krubble-components.umd.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -571,16 +571,27 @@
|
|
|
571
571
|
dropdown.style.right = '';
|
|
572
572
|
dropdown.style.minWidth = hostRect.width + 'px';
|
|
573
573
|
dropdown.style.transformOrigin = 'top left';
|
|
574
|
+
dropdown.style.maxHeight = '';
|
|
575
|
+
dropdown.style.overflowY = '';
|
|
574
576
|
const dropdownRect = dropdown.getBoundingClientRect();
|
|
575
|
-
// Open above if dropdown
|
|
576
|
-
|
|
577
|
+
// Open above only if the dropdown doesn't fit below and there's more room above than below
|
|
578
|
+
// 8 = 4px gap between button and dropdown + 4px margin from viewport edge
|
|
579
|
+
if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8 && hostRect.top > window.innerHeight - hostRect.bottom) {
|
|
577
580
|
dropdown.style.top = '';
|
|
578
581
|
dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px';
|
|
579
582
|
dropdown.style.transformOrigin = 'bottom left';
|
|
580
583
|
dropdown.classList.add('dropdown--above');
|
|
584
|
+
if (dropdownRect.height > hostRect.top - 8) {
|
|
585
|
+
dropdown.style.maxHeight = hostRect.top - 8 + 'px';
|
|
586
|
+
dropdown.style.overflowY = 'auto';
|
|
587
|
+
}
|
|
581
588
|
}
|
|
582
589
|
else {
|
|
583
590
|
dropdown.classList.remove('dropdown--above');
|
|
591
|
+
if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8) {
|
|
592
|
+
dropdown.style.maxHeight = window.innerHeight - hostRect.bottom - 8 + 'px';
|
|
593
|
+
dropdown.style.overflowY = 'auto';
|
|
594
|
+
}
|
|
584
595
|
}
|
|
585
596
|
// Align right if dropdown overflows viewport right
|
|
586
597
|
if (dropdownRect.right > window.innerWidth) {
|
|
@@ -901,6 +912,7 @@
|
|
|
901
912
|
.dropdown {
|
|
902
913
|
position: fixed;
|
|
903
914
|
min-width: 100%;
|
|
915
|
+
box-sizing: border-box;
|
|
904
916
|
background: white;
|
|
905
917
|
border: 1px solid #9ba7b6;
|
|
906
918
|
border-radius: 8px;
|