Vuetify: How to horizontally- and vertically align a text field in a parallax

Question

I am trying to horizontally- and vertically align a text field within a parallax in Vuetify. Doing it with text works fine as seen here (Center text in Parallax) but doing it with a text field fails (Center Textfield in Parallax).

Code:

<template>
<v-app>
    <v-main>
        <v-parallax src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg">
            <div class="d-flex flex-column fill-height justify-center align-center text-white">
                <v-text-field label="Your email" clearable variant="solo" prepend-inner-icon="mdi-email-outline" min-width="350">
                    <template v-slot:append-inner>
                        <v-btn class="mt-n1" color="green">
                            Sign up
                        </v-btn>
                    </template>
                </v-text-field>
            </div>
        </v-parallax>
    </v-main>
</v-app>

Thanks!

Answer 1

Its because the text field has some flex rules on it already.

Add the flex helper class flex-grow-0 to the text field.

And add align-self-stretch to ensure the text field width changes.

To add some spacing either side, add mx-5 helper class.

<v-text-field class="flex-grow-0 align-self-stretch mx5" label="Your email" clearable variant="solo" prepend-inner-icon="mdi-email-outline" min-width="350">

Example: Link