Keep the min-width of a dropdown equal to the width of the input element

This commit is contained in:
cmdr2 2023-02-24 20:08:19 +05:30
parent fce8b96d3b
commit bd82480fa3
3 changed files with 7 additions and 3 deletions

View File

@ -770,7 +770,7 @@ input::file-selector-button {
opacity: 1;
}
.model-filter {
width: calc(100% - 20px);
width: 90%;
padding-right: 20px;
white-space: nowrap;
overflow: hidden;

View File

@ -476,7 +476,8 @@ class ModelDropdown
createDropdown() {
// create dropdown entries
this.modelFilter.insertAdjacentElement('afterend', this.createRootModelList(this.inputModels))
let rootModelList = this.createRootModelList(this.inputModels)
this.modelFilter.insertAdjacentElement('afterend', rootModelList)
this.modelFilter.insertAdjacentElement(
'afterend',
this.createElement(
@ -507,6 +508,9 @@ class ModelDropdown
this.modelList.addEventListener('mousemove', this.bind(this.highlightModelAtPosition, this))
this.modelList.addEventListener('mousedown', this.bind(this.processClick, this))
let modelFilterStyle = window.getComputedStyle(this.modelFilter)
rootModelList.style.minWidth = modelFilterStyle.width
this.selectEntry(this.activeModel)
}

View File

@ -239,7 +239,7 @@
merge.innerHTML = `
<div class="merge-container panel-box">
<div class="merge-input">
<div class="merge-input" style="position: relative">
<p><label for="#mergeModelA">Select Model A:</label></p>
<input id="mergeModelA" type="text" spellcheck="false" autocomplete="off" class="model-filter" data-path="" />
<p><label for="#mergeModelB">Select Model B:</label></p>