How to make q-scroll-area with max height as percentage of the screen?

[LouisD135]

I am creating a login/create account component that appears as a window in front of the rest of the site. I wish for the area to be as big as it needs to be but no bigger than a certain percentage of the screen in which case it will become scrollable. I can achieve this with a max height style but currently I have to hard code in the height of the login and create to the height field which is fine except this height is subject to change.

Basically what I am looking for is a way to make a components height be what ever it needs to be but no more than 70%.
In these code snippets you can see the max height style and hard coded height styles basically I want a way to remove these hard coded height values and it just be as big as it needs to be. One would assume that this would be the default case if the height parameters were removed and only max height was left however this is not the case.

This div contains a q-scroll-area with all the form contents in it

<div class='fixed-center q-pl-lg bg-baseblack grey-border login-card column'
       :style="loginFlag ? enableFacebook ? 'height: 569px' : 'height: 501px' : 'height: 775px'">

.login-card {
  max-width: 430px;
  width: 90%;
  z-index: 500;
  max-height: 70%;
}

[LouisD135]

Here is a code pen showing this not working as intended: https://codepen.io/louisd135/pen/qBaYZZR?editors=1111
Remove the style=‘height:500px’ tag and the scroll area will completely disappear setting its height to 0.

[beets]

@LouisD135 q-scrollarea uses absolute positioning, which makes it impossible to do what you want. But you can achieve it with a simple <div class="scroll"> https://codepen.io/pianopronto/pen/mdrLPKG?editors=1111

The only downside is that lack of the custom scrollbar. You can style it a bit with css depending on the browser though.

[LouisD135]

@beets Thank you I’ll look into styling with css

[Ilia]

@LouisD135 Would that one work?

https://codepen.io/pikil/pen/dypeNRw

Based on https://quasar.dev/vue-components/dialog#Handling-scroll

[LouisD135]

@Ilia yeah it would have been nice to be able to use the quasar scroll area but this is the type of thing I ended up going with thanks for the reply