CODEWITHSUNDEEP
bootstrap-4bootstrap-vue
Rey
Rey

Reputation: 4002

Decrease the width of b-dropdown-item bootstrap-vuejs

For some reason I am struggling to set a custom width size for b-dropdown-item-s in vuejs. Below is my code.

<b-dropdown split split-variant="secondary-light" variant="secondary-light" :text="maxVersion.toString()" lazy
    :split-to="'/test'" @toggle="loadVersions">
    <b-dropdown-item v-if="loading" class="text-center" href="#">
        <b-icon icon="three-dots" animation="cylon" font-scale="2" />
    </b-dropdown-item>
    <template v-else>
        <b-dropdown-item v-for="version in versions" :key="version.version" :to="'#'">
            {{ version.version }}
        </b-dropdown-item>
    </template>
</b-dropdown>

I try to set max-width on each element but still for some reason the dropdown looks wide and not what I indented.

Below is what it looks like.

enter image description here

Does anybody know how to apply the style to make items narrower because it does not make sense to be that wide for some simple numbers ?

Upvotes: 0

Views: 1173

Answers (1)

Iman Shafiei
Iman Shafiei

Reputation: 1617

If you look accurately to .dropdown-menu CSS class. You will see this line of CSS in that class:

min-width: 10rem;

This line prevents your ul tag from decreasing. I provide a sample and quick code snippet in order to show the solution.

new Vue({
  el: '#app',
})
.dropdown-menu {
    min-width: 1rem !important;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<div id="app">

  <b-dropdown text="All">
    <b-dropdown-item value="1">1</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item value="2">2</b-dropdown-item>
    <b-dropdown-item value="3">3</b-dropdown-item>
  </b-dropdown>
</div>

Upvotes: 1

Related Questions