No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. dylanreeve
    D
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 3
    • Best 1
    • Groups 0

    dylanreeve

    @dylanreeve

    2
    Reputation
    5
    Profile views
    3
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    dylanreeve Follow

    Best posts made by dylanreeve

    • 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.

      posted in Help
      D
      dylanreeve

    Latest posts made by dylanreeve

    • RE: Best practice setting up q-scroll-area

      @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

      posted in Help
      D
      dylanreeve
    • 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.

      posted in Help
      D
      dylanreeve
    • RE: [SOLVED][v1] q-expansion-item open tree when route is active?

      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.

      posted in Framework
      D
      dylanreeve