I'm using Bootstrap-vue. I need to make the b-dropdown-item-button wrap the text it's showing. How could I do that?
<template>
<b-dropdown menu-class="py-1" text="··· Actions">
<b-dropdown-item-button>Delete</b-dropdown-item-button>
</b-dropdown>
</template>
The dropdown has a min-width andwhite-space: nowrap` set by default, so you need to apply some css to override this.
window.onload = () => {
new Vue({
el: '#app'
})
}<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.4/dist/bootstrap-vue.min.js"></script>
<style>
/* Adding it here since it wasn't working in the snippet CSS */
body { padding: 1rem; }
/* Removes the min-width on the dropdown-menu and sets the width to 100% of the parent */
.wrap-dropdown {
width: 100%;
min-width: 0;
}
/* applies white-space: normal to all tags inside the dropdown-menu */
.wrap-dropdown * {
white-space: normal;
}
</style>
<div id="app">
<b-dd menu-class="py-1 wrap-dropdown" text="··· Actions">
<b-dd-item-btn>Delete</b-dd-item-btn>
<b-dd-item-btn>
This text is really long
</b-dd-item-btn>
</b-dd>
</div>