Verified Commit 2c72811b authored by Sandro Lutz's avatar Sandro Lutz
Browse files

Restrict Select menu height

parent 33331375
......@@ -63,6 +63,7 @@ export default class SelectComponent {
this.focused = false;
this.isOpen = false;
this.valid = true;
this.element = null;
}
validate() {
......@@ -70,6 +71,10 @@ export default class SelectComponent {
!this.required || (this.value !== null && (!this.multiple || this.value.length > 0));
}
oncreate({ dom }) {
this.element = dom;
}
view({
attrs: {
label = this.name,
......@@ -188,6 +193,12 @@ export default class SelectComponent {
}
_renderMenu(options) {
let maxHeight = '80vh';
if (this.element !== null) {
const rect = this.element.getBoundingClientRect();
maxHeight = `${Math.min(0.8 * window.innerHeight, window.innerHeight - rect.top - 16)}px`;
}
return m(Menu, {
className: 'pe-select--menu',
target: `#${this.name}-select`,
......@@ -196,6 +207,7 @@ export default class SelectComponent {
didHide: () => {
this.isOpen = false;
},
style: { maxHeight },
content: m(
List,
options.map(option => {
......
......@@ -97,11 +97,16 @@
user-select: none;
}
.pe-select--menu {
max-height: 80vh;
}
.pe-select--menu .pe-menu__panel {
width: 100%;
max-height: inherit;
.pe-menu__content {
max-height: 80vh;
max-height: inherit;
overflow-y: auto;
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment