Rendering custom styles in bootstrap-vue

Question

I'm trying to add some custom styles to a dropdown menu component which uses Bootstrap-Vue. I'm using the documentation here.

Here is my template:

<div class="container">
  <b-dropdown id="dropdownMenuButton" text="Dropdown Button" no-caret class="custom-dropdown">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item>Something else here...</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

I'm finding that I can style #dropdownMenuButton, but when the dropdown renders in the browser it creates a element inside of #dropdownMenuButton and I can't style that. I've tried doing so like this:

<style scoped>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>

But no luck. FYI the id of the button that gets created is dropdownMenuButton__BV_toggle_.

Answer 1

This is beacause you are making the styles scoped to the component and since bootstrap vue dropdown is another component you wont be able to do this with scoped styles.

https://vue-loader.vuejs.org/guide/scoped-css.html

Try removing the scoped attribute like this.

<style>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>