Search code examples
cssvue.jspaddingsidebar

Own padding not working on b-sidebar (vue)

I am using bootstrap-vue and would like to add some padding to my sidebar, but i cant get it to work. If I add padding in the browser devtools, it does. But my code wont go through to the browser, so it does not show there at all.

I have tried to give it a class myself -> ends up in at the main tag with class: "b-sidebar-outer" ->Doesnt help, because i need it to go to the one with "b-sidebar"

But if i do this (or as specific as possible with classes):

.b-sidebar {
    padding: 10px;
}

-> not showing

I could give the padding to the elements inside my sidebar, but that would be a lot more work. :c

Can anyone help?

Solution

  • Vue.JS gives every component and unique uid. In your DevTools you will see that components are having a data attribute, when your CSS is parsed it will look something like this div[data-v-f3f3eg9].

    This way multiple components can use the same class names without intervening with eachother.

    To set a style in another component you can use a deep selector

    For SCSS:

    /deep/ .b-sidebar {
  padding: 10px;
}

    For CSS:

    .your-class >>> .b-sidebar {
  padding: 10px;
}