2

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

Quentin
  • 65
  • 9
  • Can you share some of your code or replicate de issue in a codesanbox? You can use this vuetify template I made: https://codesandbox.io/s/vuetify-template-obbqe – cmfc31 Sep 08 '22 at 14:47

3 Answers3

3

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>
yoduh
  • 7,074
  • 2
  • 11
  • 21
2

From docs v3(v2).

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

So, you can just pass floating to your drawer.

Epicker
  • 21
  • 2
0

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
huan feng
  • 7,307
  • 2
  • 32
  • 56