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

Dropdowns not showing if parent element goes to fullscreen mode only after build #17402

Closed
thepacketloss opened this issue Jul 28, 2024 · 1 comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 mode/spa Qv2 🔝 Quasar v2 issues

Comments

@thepacketloss
Copy link

thepacketloss commented Jul 28, 2024

What happened?

In dev mode all dropdowns showing correctly in both normal and fullscreen mode
but after build If the parent element goes to fullscreen mode then dropdowns does not work
I tested it with any of q-btn-dropdown and q-popup-proxy and q-menu components in latest version of Quasar, vue and vite

What did you expect to happen?

Show dropdowns correctly if parent goes to fullscreen mode after build

Reproduction URL

https://jsfiddle.net/kd2w9hg4/

How to reproduce?

Here is a minimal example to reproduce :
After building the project, click on the fullscreen button

<template>
  <q-layout view="lHh Lpr lFf">
    <q-page-container>
      <q-page ref="parent" class="flex flex-center" style="width: 300px;height: 300px">
        <q-btn-dropdown color="primary" label="Dropdown">
          <q-list>
            <q-item clickable v-close-popup>test1</q-item>
          </q-list>
        </q-btn-dropdown>

        <q-btn push color="primary" label="Popup-proxy">
          <q-popup-proxy>
            <q-banner>test</q-banner>
          </q-popup-proxy>
        </q-btn>

        <q-btn color="primary" label="Menu">
          <q-menu>
            <q-list style="min-width: 100px">
              <q-item clickable v-close-popup>test2</q-item>
            </q-list>
          </q-menu>
        </q-btn>

        <span :class="['absolute-top-right']" style="margin:50px">
      <q-btn @click.prevent="toggleFullScreen(parent)">fullscreen</q-btn>
    </span>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup>
import {ref} from "vue";
const parent = ref()
async function toggleFullScreen(el = undefined) {
  if (!document.fullscreenElement) {
    el && await el.$el.requestFullscreen()
  } else {
    await document.exitFullscreen()
  }
}
</script>

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), SPA Mode

Platforms/Browsers

Firefox, Chrome

Quasar info output

Operating System - Linux(6.10.1-arch1-1) - linux/x64
NodeJs - 22.5.1
Global packages
  NPM - 10.8.2
  yarn - 1.22.22
  pnpm - 8.15.4
  bun - 1.1.21
  @quasar/cli - 2.4.1
Important local packages
  quasar - 2.16.6 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.0.0-beta.15 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  vue - 3.4.34 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.0

Relevant log output

No response

Additional context

No response

@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite mode/spa labels Jul 28, 2024
@thepacketloss thepacketloss changed the title Dropdowns not showing in fullscreen mode only after build Dropdowns not showing if parent element goes to fullscreen mode only after build Jul 30, 2024
@thepacketloss
Copy link
Author

it seems that using quasar method to fullscreen ( $q.fullscreen.toggle() ) solved the problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 mode/spa Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

1 participant