CODEWITHSUNDEEP
dialoggridvuetify.js
Otorrinolaringologista -man
Otorrinolaringologista -man

Reputation: 1137

Vuetify Grid system adding a horizontal scroll bar in my dialog

Good day. I have the following dialog that whenever i add anything inside it's component an horizontal scrollbar shows up and the right of my dialog suddenly has a space on it's right side. like in reference pic enter image description here

This right here all the code i have:

My view:

<template>
<v-main>
    <v-dialog
    v-model="dialog"
    >
        <v-card background-color="white">
            <div>
                <myComponent/>
            </div>
        </v-card>
    </v-dialog>
    <v-container>
     // rest of my code
    </v-container>
 </main>
 </template>

My Component:

<template>
        <v-main>
            <v-row align='center' justify="center">
                <v-col class="d-flex justify-center" cols="5">
                    hello
                </v-col>
            </v-row>   
        </v-main>
</template>

Why does this happen exactly. Every page i has scooped styles and most of them don't even have any css applied to it. When i remove the "hello" together with the v-col tags the dialog goes back to normal like so:

enter image description here

Upvotes: 1

Views: 1433

Answers (1)

berkobienb
berkobienb

Reputation: 714

Add style="overflow-x: hidden;" to your div that is wrapped around <myComponent/>

Upvotes: 1

Related Questions