Skip to content

[Bug Report][2.5.5] wrong vertical stepper padding in RTL mode #13981

Closed
@alisalemmi

Description

Environment

Vuetify Version: 2.5.5
Vue Version: 2.6.14
Browsers: Edge 91.0.864.71, Google Chrome, Microsoft Edge
OS: Windows 10, Linux

Steps to reproduce

when I use vertical v-stepper in RTL mode paddings of v-stepper-content are wrong and cause v-stepper-content to overflow but it can be easily solved by swapping padding-left with padding-right

Expected Behavior

.v-application--is-rtl {
    .v-stepper--vertical {
        .v-stepper__content {
            padding: 16px 23px 16px 60px;
        }
    }
}

Actual Behavior

.v-stepper--vertical {
    .v-stepper__content {
        padding: 16px 60px 16px 23px;
    }
}

Reproduction Link

https://codesandbox.io/s/vuetify-playground-forked-7u5i4?file=/src/stepper.vue

Metadata

Assignees

Labels

C: VStepperT: bugFunctionality that does not work as intended/expectedrtl

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions