CODEWITHSUNDEEP
javascripthtmlcssvue.jsbootstrap-vue
Ara Medina
Ara Medina

Reputation: 177

Rendering custom styles in bootstrap-vue

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_.

Upvotes: 8

Views: 13883

Answers (2)

Randomtheories
Randomtheories

Reputation: 1290

You can also use the /deep/ keyword to just affect child components, if you don't want to clutter global styles:

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

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

Upvotes: 12

Maantje
Maantje

Reputation: 1801

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>

Upvotes: 15

Related Questions