I’ve had various issues with trying to get a responsive Scroll Area.

This post was helpful: https://forum.quasar-framework.org/topic/3756/best-practice-setting-up-q-scroll-area

But it still wasn’t working for me, even when I had the flex columns working as intended.

The key I found was needing to have an absolute height set on at least one parent element. What I ended up doing was attaching a Style-Fn to the q-page element…

<q-page class="column" :style-fn="styleFn">

And then a function that sets absolute height instead of the default min-height

styleFn(offset, height) {
  let pageheight = height - offset;
  console.log("PageHeight: " + pageheight);
  return "height: " + pageheight + "px";
}

After that I found that the scroll area sized properly simply by adding the col class.

I posted this because it vexed me for ages and I couldn’t find a clear solution.

@dsl101 Thanks for this. It was useful. I still had issues with the scroll area in a page. I found that I needed to have a absolute height specified in a parent element.

Details here: https://forum.quasar-framework.org/topic/5315/q-scroll-area-height

I’ve had various issues with trying to get a responsive Scroll Area.

This post was helpful: https://forum.quasar-framework.org/topic/3756/best-practice-setting-up-q-scroll-area

But it still wasn’t working for me, even when I had the flex columns working as intended.

The key I found was needing to have an absolute height set on at least one parent element. What I ended up doing was attaching a Style-Fn to the q-page element…

<q-page class="column" :style-fn="styleFn">

And then a function that sets absolute height instead of the default min-height

styleFn(offset, height) {
  let pageheight = height - offset;
  console.log("PageHeight: " + pageheight);
  return "height: " + pageheight + "px";
}

After that I found that the scroll area sized properly simply by adding the col class.

I posted this because it vexed me for ages and I couldn’t find a clear solution.

FWIW I solved this with the following prop in the q-expansion-item:

:value="$route.matched[0].path == link.link"

In this case “link” is the v-for value from a menu object that’s structured like:

[
{ link: “/”, title: “Home” },
{ link: “/option”, title: “Option”, children: [ {link: “/option/subitem”, title: “SubItem 1.1”}, {link: “/option/subitem”, title: “SubItem 1.1”}]}
{ link: “/option2”, title: “Option 2”, children: [ {link: “/option2/subitem”, title: “SubItem 2.1”}, {link: “/option2/subitem”, title: “SubItem 2.1”}]}
]

A v-if in the Menu component decides whether I use a q-expansion-item (for items with children) or a q-item for single level items.

So far is seems to work.