diff --git a/buildoz.css b/buildoz.css index d544e74..8c7d205 100644 --- a/buildoz.css +++ b/buildoz.css @@ -29,9 +29,16 @@ bz-select > button::after { font-size: 1.5em; color: #444; } - +bz-select > div.options-container{ + position: absolute; + top: 100%; + left: 0; + width: 100%; + z-index: 99; +} bz-select option{ background-color: #DDD; + border: 1px solid black; color: #000; padding: 0.2em .2em .3em .5em; margin: -1em 0 0 0; @@ -46,7 +53,7 @@ bz-select option{ opacity 0.3s ease; } bz-select option.open{ - margin: 2px 0 0 0; + margin: 0; opacity: 1; pointer-events: auto; } diff --git a/buildoz.js b/buildoz.js index a19bcf7..279806e 100644 --- a/buildoz.js +++ b/buildoz.js @@ -55,9 +55,12 @@ class BZselect extends Buildoz { connectedCallback() { super.connectedCallback() this.button = document.createElement('button') - this.button.textContent = this.getBZAttribute('label') + this.button.textContent = this.getBZAttribute('label') this.prepend(this.button) this.button.addEventListener('click', this.toggle.bind(this)) + if(!this.optionscontainer) this.optionscontainer = document.createElement('div') + this.optionscontainer.classList.add('options-container') + this.append(this.optionscontainer) this.options = this.querySelectorAll('option') if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !! for(const opt of this.options){ @@ -112,18 +115,19 @@ class BZselect extends Buildoz { } addOption(value, markup){ - // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM + // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM const opt = document.createElement('option') opt.setAttribute('value', value) opt.innerHTML = markup opt.addEventListener('click',this.onClick.bind(this)) - this.append(opt) + if(!this.optionscontainer) this.optionscontainer = document.createElement('div') + this.optionscontainer.append(opt) this.options = this.querySelectorAll('option') this.#fillFromMarkup = false } fillOptions(opts, erase = true){ - // Caution: you can count on connectedCallback to have run already, because one might fill before adding to the DOM + // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM if(erase){ this.options = this.querySelectorAll('option') this.options.forEach(node => { node.remove() })