Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(VDialog): ignore size props when fullscreen #20554

Merged
merged 3 commits into from
Nov 6, 2024

Conversation

Jesse205
Copy link
Contributor

@Jesse205 Jesse205 commented Oct 3, 2024

Description

fixes #19915

Markup:

<template>
  <v-app>
    <v-container>
      <div class="pa-4 text-center">
        <v-dialog
          v-model="dialog"
          :fullscreen="isFullscreen"
          scrollable
          width="600"
          height="600"
          max-width="600"
          max-height="600"
        >
          <template v-slot:activator="{ props: activatorProps }">
            <v-btn
              class="text-none font-weight-regular"
              text="Edit Profile"
              variant="tonal"
              v-bind="activatorProps"
            ></v-btn>
          </template>
          <form>
            <v-card>
              <v-card-item>
                <v-card-title style="display: flex">
                  <span>User Profile</span>
                  <v-spacer />
                  <v-btn
                    :icon="isFullscreen ? 'mdi-fullscreen-exit' : 'mdi-fullscreen'"
                    variant="text"
                    @click="isFullscreen = !isFullscreen"
                  ></v-btn>
                </v-card-title>
              </v-card-item>
              <v-card-text>
                <v-row dense>
                  <v-col cols="12" md="4" sm="6">
                    <v-text-field label="First name*" required></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field
                      hint="example of helper text only on focus"
                      label="Middle name"
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field
                      hint="example of persistent helper text"
                      label="Last name*"
                      persistent-hint
                      required
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field label="Email*" required></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field
                      label="Password*"
                      type="password"
                      required
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" md="4" sm="6">
                    <v-text-field
                      label="Confirm Password*"
                      type="password"
                      required
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6">
                    <v-select
                      :items="['0-17', '18-29', '30-54', '54+']"
                      label="Age*"
                      required
                    ></v-select>
                  </v-col>

                  <v-col cols="12" sm="6">
                    <v-autocomplete
                      :items="[
                        'Skiing',
                        'Ice hockey',
                        'Soccer',
                        'Basketball',
                        'Hockey',
                        'Reading',
                        'Writing',
                        'Coding',
                        'Basejump',
                      ]"
                      label="Interests"
                      auto-select-first
                      multiple
                    ></v-autocomplete>
                  </v-col>
                </v-row>

                <small class="text-caption text-medium-emphasis"
                  >*indicates required field</small
                >
              </v-card-text>

              <v-divider></v-divider>

              <v-card-actions>
                <v-spacer></v-spacer>

                <v-btn
                  text="Close"
                  variant="plain"
                  @click="dialog = false"
                ></v-btn>

                <v-btn
                  color="primary"
                  text="Save"
                  variant="tonal"
                  @click="dialog = false"
                ></v-btn>
              </v-card-actions>
            </v-card>
          </form>
        </v-dialog>
      </div>
    </v-container>
  </v-app>
</template>

<script setup>
import { ref } from "vue";

const dialog = ref(true);
const isFullscreen = ref(false);
</script>

@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VDialog VDialog labels Oct 28, 2024
@KaelWD KaelWD added this to the v3.7.x milestone Nov 6, 2024
@KaelWD KaelWD merged commit 3adcbef into vuetifyjs:master Nov 6, 2024
11 checks passed
@KaelWD KaelWD changed the title fix(VDialog): remove maxHeight and maxWidth and height and width when fullscreen fix(VDialog): ignore size props when fullscreen Nov 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VDialog VDialog T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.6.4] v-dialog fullscreen not working when width it's set
3 participants