How to remove border next to v-navigation-drawer

1.6k Views Asked by At

I made a navigation drawer WITHOUT borders but a thin line on the left just can't seem to go away. I tried doing a border : none to remove any border around the component, it won't work.

I also tried inspecting the element, and the problem is a <div class="v-navigation-drawer__border"></div> so I tried removing it by calling it in the CSS but it's still there. I even added the !important propriety.

Does anyone know how to remove a border next to a v-navigation-border ? What it looks like

3

There are 3 best solutions below

0
On BEST ANSWER

You have to use a deep selector for scoped CSS to select inner elements of components.

<style scoped>
.v-navigation-drawer >>> .v-navigation-drawer__border {
  display: none
}
</style>
0
On

From docs v3(v2).

A floating drawer has no visible container (no border-right)

So, you can just pass floating to your drawer.

0
On

https://vuetifyjs.com/en/api/v-navigation-drawer/#sass-navigation-drawer-border-width

According to the vuetify doc, you could set the variable #$navigation-drawer-border-width to 0

$navigation-drawer-border-width: 0