CODEWITHSUNDEEP
htmlcss
Taian
Taian

Reputation: 319

Fixed height on multiselect

As you can see on jsfiddle bellow, I'm using a vue component called Vue Multiselect.

When the text of a multiselect is bigger then its width, the height of the multiselect increases to fit the text.

I would like to maintain it in one line without increasing the height nor the width.

https://jsfiddle.net/uweL9zap/1/

HTML:

<div id="app">
  <multiselect 
    v-model="value" 
    :options="options"
    track-by="library"
    :custom-label="customLabel"
    :option-height="50"
    >
  </multiselect>
</div>

JS:

new Vue({
    components: {
    Multiselect: window.VueMultiselect.default
    },
    data: {
    value: { language: 'JavaScript teste teste teste', library: 'Vue-Multiselect' },
    options: [
        {   language: 'JavaScript teste teste teste', library: 'Vue.js' },
      { language: 'JavaScript teste teste teste', library: 'Vue-Multiselect' },
      { language: 'JavaScript teste teste teste', library: 'Vuelidate' }
    ]
    },
  methods: {
    customLabel (option) {
      return `${option.library} - ${option.language}`
    }
  }
}).$mount('#app')

CSS:

* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

.multiselect {
  width: 300px;
}

Upvotes: 6

Views: 6691

Answers (1)

Orlandster
Orlandster

Reputation: 4858

If you simply want to cut the text you could add the following css:

.multiselect__single {
  white-space: nowrap;
  overflow: hidden; 
}

white-space: nowrap will avoid the line breaks and overflow: hidden just hides the overlapping text. The wdith and height of the select will stay the same as before.

Here you can see it in action: https://jsfiddle.net/f7at84y6/

Upvotes: 8

Related Questions