0

I want to do the opposite the what OP wants in this post

My selects are auto resizing for some reason (probably by using bootstrap, which I have to use). I just want to have a default resizing.

I have two inline select elements and they keep resizing according to the length of the selected option. I want to change their behavior to the default like in this fiddle. It takes the longest string "United States of America" and sets the elements width according to it.

HTML 

<div class="flex-top-down">
  <span class="input-header">Doc Type</span>
  <v-select v-model="docTypeSelect.value"
    class="dropdown-default"
    :options="docTypeSelect.options"
    options-value="val"
    placeholder="Please Select"
    search justified required
    close-on-select
  ></v-select>
</div>

<div class="flex-top-down">
  <span class="input-header">Major/Minor</span>
  <v-select v-model="majorMinorSelect.value"
    class="dropdown-default"
    :options="majorMinorSelect.options"
    options-value="val"
    placeholder="Please Select"
    search justified required
    close-on-select
  ></v-select>
</div>

I am using VueStrap here to use bootstrap with vue.js

CSS:

 .flex-top-down {
    display: flex;
    flex-direction: column;
  }

  .input-header {
    font-weight: bold;
    margin-left: 10px;
  }

  .dropdown-default {
    margin-top: 6px;
  }
brainmassage
  • 1,234
  • 7
  • 23
  • 42

1 Answers1

0

if you would like to use bootstrap selectpicker then it can be really easy.

here is example.

https://silviomoreto.github.io/bootstrap-select/examples/#width

Prince Sodhi
  • 2,845
  • 2
  • 21
  • 35