How set max-height for select options' wrapper in bootstrap-vue?

Question

How can set max-height: 100px for select options' wrapper?

Vue.component('customIcon', {
  template: `<svg xmlns="http://www.w3.org/2000/svg" width="15.352" height="15.355" viewBox="0 0 15.352 15.355">
        <path id="Union_19" data-name="Union 19" d="M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z" transform="translate(27.176 15966.178)" fill="none" stroke="#bbb" stroke-width="0.5"/>
    </svg>`
})

new Vue({
  el: "#app",
  data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option' },
          { value: { C: '3PO' }, text: 'This is an option with object value' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'Sample' },
          { value: 'f', text: 'Sample' },
          { value: 'g', text: 'Sample' },
          { value: 'h', text: 'Sample' },
          { value: 'i', text: 'Sample' },
          { value: 'j', text: 'Sample' },
          { value: 'k', text: 'Sample' },
          { value: 'l', text: 'Sample' },
          { value: 'm', text: 'Sample' }
        ]
      }
    }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
  </div>
</div>

It's ok when my options are not so many. But I need just shows about 10 options and others be shown when scroll. So when click the select and see options, the wrapper of options have max-height 100px.

Answer 1

Based on this question, you can not change the height of the select options, but there is an alternative way to do this with the size attribute of select and some javascript code.

new Vue({
  el: "#app",
  data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option' },
          { value: { C: '3PO' }, text: 'This is an option with object value' },
          { value: 'd', text: 'This one is disabled', disabled: true },
          { value: 'e', text: 'Sample' },
          { value: 'f', text: 'Sample' },
          { value: 'g', text: 'Sample' },
          { value: 'h', text: 'Sample' },
          { value: 'i', text: 'Sample' },
          { value: 'j', text: 'Sample' },
          { value: 'k', text: 'Sample' },
          { value: 'l', text: 'Sample' },
          { value: 'm', text: 'Sample' }
        ]
      }
    }
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <div>
    <b-form-select onfocus='this.size=5;' onblur='this.size=5;' 
onchange='this.size=5; this.blur();' onfocusout='this.size=null;' v-model="selected" :options="options"></b-form-select>
  </div>
</div>