CODEWITHSUNDEEP
javascriptvue.jstailwind-cssvue-multiselect
Jyothilakshmi c
Jyothilakshmi c

Reputation: 245

Limit text length in vue-Multiselect

I have used the 'Single Select' Object from the 'vue-MultiSelect' package for 'search select' in my project. The options I have in the select list are too lengthy (as they are site addresses/urls) and they flow over the input box size and destroy the UI. I may need to set up a character limit for populating the value which may help to keep the UI intact. Which class I can use to limit the length of the text that populate? Or any better alternatives?

For Normal select list, We can set the data-limit like data-limit ="37" to limit the text length.

<select
  v-model="filter.url_name"
  class="w-4/6 relative truncate overflow-hidden form-select pr-10 appearance-none "
  aria-label="Default select example">
  <option
    class="absolute w-4/6 truncate overflow-hidden right-0"
    data-limit="37"
    :value="item"
    v-for="(item, index) in requiredUrlsFiltersData"
    :key="index"
  >
    {{ item }}
  </option>
</select>

For vue-multi select, I have tried the same way and tried to pass it inside a method like this

@input="siteSelected(filter.url_name, 37, filter.url_name.length)"

and return the value

siteSelected(str, max, len) {  
  return len > max ? str.substring(0, 37) : str;
},

Both didn't work.

<multiselect
  v-model="filter.url_name"
  :options="requiredUrlsFiltersData"
  placeholder="select a url"
  class="max-w-sm"
  data-limit="37"
  :rules="maxlength"
  @input="siteSelected(filter.url_name, 37, filter.url_name.length)"
  :show-labels="false"   
>
</multiselect>

Upvotes: 1

Views: 968

Answers (1)

T&#226;nia Rocha
T&#226;nia Rocha

Reputation: 1

if it's only a visual problem that the input text is overflowing you can solve it with css :

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

these styles hide the text that overflows with "..." in the end. Add this to the end of you file in between <style></style> it should work

Upvotes: 0

Related Questions