VuetifyJS: how to get rid of the v-stepper component elevation?

Question

When using the v-stepper component in Vuetify, there is a default border like shape that appears on the edges:

I want to remove it. I tried to set the elevation to 0 but it did not work.

<v-stepper v-model="e1" class="elevation-{0}">

How to achieve this?

score 9 · Accepted Answer · answered Oct 03 '18 at 07:35

9

Not elevation-{0}, but elevation-0.
Elevation docs:

You can set an element's elevation by using the class elevation-{n}, where n is a integer between 0-24 corresponding to the desired elevation.

So actually you need to remove parentheses as well.
Should be clear because you can't use parentheses in class names as far as I know.

answered Oct 03 '18 at 07:35

Traxo

Any thought about why the prop elevation from the component is not working? Also flat not working ... – Ignasi Oct 17 '22 at 15:29
@Ignasi Which Vuetify version? Also could you provide chunk of relevant code, just to be sure? – Traxo Oct 18 '22 at 20:37
2

With I still got the elevation. However, when adding class="elevation-0", the elevation disappears. Version -> vuetify@2.3.10 Thanks! – Ignasi Oct 26 '22 at 08:00

score 4 · Answer 2 · answered May 26 '20 at 18:18

4

just put the following

<v-stepper v-model="e1" class="elevation-0">

answered May 26 '20 at 18:18

Yair_May

score 3 · Answer 3 · answered Oct 02 '18 at 19:44

3

Adding some CSS works (at least w/ your pen):

.v-stepper__header {
  box-shadow: none;
}

answered Oct 02 '18 at 19:44

Matt

I had to add the !important tag for this to work. – Stephen Romero Sep 13 '22 at 22:16

score 1 · Answer 4 · answered Oct 13 '21 at 00:18

1

<v-stepper v-model="e1" flat> for removing round edges and

.v-stepper__header {
  box-shadow: none;
}

to remove header shadow

answered Oct 13 '21 at 00:18

deirdreamuel

4 Answers4