Adjust the select box when option value is bigger using element ui

How this is possible please guide

It should not cut the string after selection

<template>
<el-select v-model=”value” placeholder=”Select”>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”>
</el-option>
</el-select>
</template>
</div>

var Main = {
data() {
return {
options: [{
value: ‘OptionFirstWithBigCharacter’,
label: ‘OptionFirstWithBigCharacter’
}, {
value: ‘Option2’,
label: ‘Option2’
}, {
value: ‘Option3’,
label: ‘Option3’
}, {
value: ‘Option4’,
label: ‘Option4’
}, {
value: ‘Option5’,
label: ‘Option5’
}],
value: ‘’
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount(‘#app’)
@import url(“//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css”);
<script src=”//unpkg.com/vue/dist/vue.js”></script>
<script src=”//unpkg.com/element-ui@2.7.2/lib/index.js”></script>
<div id=”app”>
<template>
<el-select v-model=”value” placeholder=”Select”>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”>
</el-option>
</el-select>
</template>
</div>

“OptionFirstWithBigCharacter” should display properly

Solution :

Add some padding to the select input as follows :

.el-select>.el-input {
display: block;
padding-right: 2px;
}

var Main = {
data() {
return {
options: [{
value: ‘OptionFirstWithBigCharacter’,
label: ‘OptionFirstWithBigCharacter’
}, {
value: ‘Option2’,
label: ‘Option2’
}, {
value: ‘Option3’,
label: ‘Option3’
}, {
value: ‘Option4’,
label: ‘Option4’
}, {
value: ‘Option5’,
label: ‘Option5’
}],
value: ‘’
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount(‘#app’)
@import url(“//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css”);
.el-select>.el-input {
display: block;
padding-right: 8px;
}
<script src=”//unpkg.com/vue/dist/vue.js”></script>
<script src=”//unpkg.com/element-ui@2.7.2/lib/index.js”></script>
<div id=”app”>
<template>
<el-select v-model=”value” placeholder=”Select”>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”>
</el-option>
</el-select>
</template>
</div>

Solution 2:

That’s an interesting question.

Obviously, the solution would be to calculate the text width of selected value and adjust select to this width, but that’s a tricky task.

Under the hood el-select uses <input> element to show selected item, and <input> can’t adjust its width based on its value, so we’d need to use another element that can do that. For example, <span> is good choice.

Here is what I’ve got:

Vue.config.productionTip = false;

var Main = {
data() {
return {
options: [{
value: ‘OptionFirstWithBigCharacter’,
label: ‘OptionFirstWithBigCharacter’
}, {
value: ‘Option2’,
label: ‘Option2’
}, {
value: ‘Option3’,
label: ‘Option3’
}, {
value: ‘Option4’,
label: ‘Option4’
}, {
value: ‘Option5’,
label: ‘Option5’
}],
value: ‘’
}
},
mounted() {
// pass true to make input use its initial width as min-width
this._addShadow();
},
methods: {
_getElements() {
// helper method to fetch input and its shadow span
const input = this.$refs.resizeable.$el.querySelector(‘.el-input__inner’);
const span = input.previousSibling;;
return { input, span };
},
_addShadow(useMinWidth = false) {
// this method adds shadow span to input
// we’ll use this span to calculate text width
const { input } = this._getElements();
const span = document.createElement(‘span’);
span.classList.add(‘resizeable-shadow’);
input.parentNode.insertBefore(span, input);

// copy font, padding and border styles from input
const css = input.computedStyleMap();
span.style.font = css.get(‘font’);
span.style.padding = css.get(‘padding’);
span.style.border = css.get(‘border’);
if (useMinWidth) {
span.style.minWidth = `${input.getBoundingClientRect().width}px`;
}
},
_adjustSize() {
this.$nextTick(() => {
const { input, span } = this._getElements();
span.textContent = input.value;
input.style.width = `${span.getBoundingClientRect().width}px`;
});
},
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount(‘#app’)
@import url(“//unpkg.com/element-ui@2.7.2/lib/theme-chalk/index.css”);

span.resizeable-shadow {
display: inline-block;
box-sizing: border-box;
position: absolute;
left: -99999px;
top: -99999px;
}
<script src=”//unpkg.com/vue/dist/vue.js”></script>
<script src=”//unpkg.com/element-ui@2.7.2/lib/index.js”></script>
<div id=”app”>
<template>
<el-select v-model=”value” placeholder=”Select”
ref=”resizeable” @change=”_adjustSize”>
<el-option
v-for=”item in options”
:key=”item.value”
:label=”item.label”
:value=”item.value”>
</el-option>
</el-select>
</template>
</div>

Code is pretty simple and I’ve added some comments, so it shouldn’t be hard to adjust it to the needs: move it to mixin, add support for multiple selects etc.

Popper works weird in SO snippet, so here is working jsfiddle.