style-fn in q-page not working when calling within q-dialog

[haaah]

What happened?

overwriting the function style-fn within q-page didn't take effect.

What did you expect to happen?

The dialog min-height should start with 100px

Reproduction URL

https://jsfiddle.net/b8wrhv4n/2/

How to reproduce?

1. open the reproduction link.
2. click run
3. click 'Notify' button
4. The dialog will utilize the full viewport height

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Style & Identity (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(23.6.0) - darwin/arm64
NodeJs - 20.11.0

Global packages
  NPM - 10.2.4
  yarn - Not installed
  @quasar/cli - 2.4.1
  @quasar/icongenie - 4.0.0
  cordova - Not installed

Important local packages
  quasar - 2.16.9 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.13.4 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.35 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.4.2
  pinia - 2.2.0 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.22.20 -- Babel compiler core.
  webpack - 5.91.0 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.11.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.9.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - Kais-MBP-2
  en0 - 192.168.10.23

Relevant log output

No response

Additional context

Although the style-fn did overwrite the style in q-page but the q-dialog is still render with 100% vh

[yusufkandemir]

Your reproduction doesn't have any q-layout defined. You may have forgotten to save your changes.

But anyway, q-dialog is a floating modal, so it's not part of the page. So, it won't be affected by the page height. This is expected behavior and is not a bug. You can specify style for q-dialog to give it the height you want.

[haaah]

Yes you are right I forgot to save the jsfiddle. I have updated the jsfiddle link please take a look.

I'm trying to create something like https://quasar.dev/layout/page#style-fn where I want to overwrite the minHeight of the q-page with something smaller instead of the default quasar behavior where it perform a calculation on offset or 100vh

[yusufkandemir]

Ah, so you are using a containerized q-layout within a q-dialog.

As you can see, style-fn runs fine.

A containerized q-layout will take all the available width/height (when it can). Normally, it requires a width/height to be set(as stated by the docs), as oftentimes it can't take up the space. In this case, since it's inside a q-dialog, it can take up the space, and it takes up all the space. Since you gave the q-layout a background color, and it takes up all the space, you see it bigger than you expected. If you give the background color to q-page instead, you will see it the size you want. https://jsfiddle.net/8qht2ga4/

Does that solve your problem?

[haaah]

thanks for the explanation and solution. Yes this solved my problem.