Full height QTabPanels in a QLayout

Is your feature request related to a problem? Please describe.

Specially when using swipeable q-tab-panels containing q-tab-panel, there is the issue that the q-tab-panel(s) don’t fill out the entire height of the q-page, but shrink in height to the content inside the panel. This makes the area below the content unswipeable.

Also, as a second negative effect, the content inside the q-tab-panel can’t use height:100% in its elements, for example if you want to specify the height of 100% for an image which should resize to use the full height of the q-page (even though this 100% height has an issue because it will refer to the full height of the q-tab-panel, so when mixed with other content the bottom will be cut off, but I think that this is generally an issue with HTML)

Using the helper class full-height does not seem to work.

Describe the solution you’d like

There should be an option in q-tab-panels to enforce it to consume the full height of its parent. Or it should respect the helper class full-height if applied to q-tab-panels.

Describe alternatives you’ve considered

The problem seems to reside in the fact that the parent container q-page does not set its height attribute, so that the browser won’t compute %-heights in the child elements. It only sets min-height to a pixel value which corresponds to the exact height necessary in the q-page for it to fill the q-page-container.

Setting q-page’s height to 1px (which will then be set to min-height automatically) will give q-tab-panels a reference to work when it gets applied a height of 100%, this will then expand the panel’s height to the full height available in the q-page.

I am not sure if this alternative is actually the correct approach to solving that issue, and if it is, maybe it should be included in the documentation of q-tab-panels. Else height should be applied programmatically by the framework in parallel to min-height if requested. Then setting height:100% on q-tab-panels would work as expected.

Additional context

The following example contains a q-toggle which will toggle the behavior on and off. The panels are swipeable, only the colored area reacts to mouse events for swipe requests. Chrome and Firefox behave identically.

https://codepen.io/danielfaust/pen/abbqmrQ?editors=1010

[smolinari]

Is this what you are looking for?

https://codepen.io/smolinari/pen/zYYRoyg?editors=1010

Notice only the added “row” entry in the q-page class.

Scott

[smolinari]

@danielfaust - I’m far, far from a CSS expert. But, this solution is dealing with the CSS (and Quasar’s) flexbox system. And knowing that often just adding “row” to a div means the Quasar’s flexbox system kicks in, the height issue went away after that. Don’t ask me why. 😁

https://quasar.dev/layout/grid/introduction-to-flexbox

Scott