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.

As I know, you can't style the options. I think using a dropdown may be useful for you. — Iman Shafiei, Apr 21 '21 at 06:30

score 1 · Accepted Answer · edited Apr 23 '21 at 16:25

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>

Thanks for your answer. It helped me. But is there a way to have default style? In your answer, style of dropdown is changed. — Atousa Darabi, Apr 26 '21 at 11:37
I see. This way changes the default behavior and style of `select` (not necessarily in a correct way). Giving styles to the dropdown of select input isn't possible because it's browser-specific. The default style is based on your browser and your OS. — Iman Shafiei, Apr 26 '21 at 15:29

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

1 Answers1