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. jyagmin
    J
    • Profile
    • Following 0
    • Followers 0
    • Topics 2
    • Posts 5
    • Best 3
    • Groups 0

    jyagmin

    @jyagmin

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

    jyagmin Follow

    Best posts made by jyagmin

    • "Will-change memory consumption is too high" warning on Firefox

      Has anyone else run into this warning message in the console on Firefox?

      Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1093664 px). Occurrences of will-change over the budget will be ignored. app

      I am playing around with datatables in 1.0.0-beta.20. I only have about 100 rows of data and started to get this message after adding the multiple selection code from the example here: https://v1.quasar-framework.org/vue-components/table

      After reading about the error in general, I can’t tell if this is my code, a Quasar bug/bad optimization or Firefox complaining needlessly. Has anyone run across this issue?

      EDIT: Doing some testing revealed this is happening specifically when I style a span within a column’s cells using “white-space: pre;” The warning goes away if I change my scoped CSS to “white-space: normal”.

      posted in Help
      J
      jyagmin
    • Q-select weirdness with more options

      I am trying to make a simple dropdown for selecting a U.S. state for an address and I’m running into a few UI issues. Some of these just might not be solvable, but any insight would be appreciated! This should be a common use case.

      I am using the 2 letter state code for the value and for the label, I am using the code and full name in brackets like: AZ (Arizona) I am storing these options in an array of objects (with value/label) and setting them with the :options property. Easy so far.

      I am listing more than the 50 states for full mailing address support. Every option from here: https://www.freeformatter.com/usa-state-list-html-select.html This means my longest label is “UM (United States Minor Outlying Islands”.

      Annoyance 1: When I scroll down the options they seem to be loading from somewhere. When that happens, things jump around as the scrollbar lengthens. The biggest issue is the options area widens when I get to some of the longer labels (using Firefox on desktop). This happens even if I hardcode the options and don’t load from a variable, so it seems to be a core optimization. Is there a way to force load all the options at once?

      I also don’t quite understand the logic for how/why the options widen as they seem to be able to wrap. Is this a browser set logic or is there a way to control the width of the displayed options? If I put the longest option first then the width problem goes away, but it would needs to be in the first 5 or so options.

      Annoyance 2: If I have a state like MA selected and I click the dropdown, it opens the options at the top, not jumping to MA. Is this related to using emit-value? Is there a way to jump to the selected option?

      Annoyance 3: In a normal HTML dropdown I can type a character to jump to a state or cycle through them. For example: https://codepen.io/carlnunes/pen/yhiEo Click the dropdown then type ‘M’ to jump to Maine. Hit M again to go to the next ‘M’ state in the list. This doesn’t work on q-select. I imagine I can replicate it using a filter/autocomplete function, but that seems like overkill.

      Thanks for any insight.

      posted in Help
      J
      jyagmin
    • RE: Q-select weirdness with more options

      Very nice! “Popup-content-style” is a new one for me, glad to learn of it.

      I was a little surprised that the q-select doesn’t start at the current selection, It might be kind of minor, but I can see it being an issue in some situations (especially on mobile, if it persists there). So I will add it as a suggestion. Thanks for your help, Scott.

      Jim

      posted in Help
      J
      jyagmin

    Latest posts made by jyagmin

    • RE: Q-select weirdness with more options

      Very nice! “Popup-content-style” is a new one for me, glad to learn of it.

      I was a little surprised that the q-select doesn’t start at the current selection, It might be kind of minor, but I can see it being an issue in some situations (especially on mobile, if it persists there). So I will add it as a suggestion. Thanks for your help, Scott.

      Jim

      posted in Help
      J
      jyagmin
    • RE: Q-select weirdness with more options

      Good point, here’s a Codepen: https://codepen.io/jyagmin/pen/PrZLLw

      posted in Help
      J
      jyagmin
    • Q-select weirdness with more options

      I am trying to make a simple dropdown for selecting a U.S. state for an address and I’m running into a few UI issues. Some of these just might not be solvable, but any insight would be appreciated! This should be a common use case.

      I am using the 2 letter state code for the value and for the label, I am using the code and full name in brackets like: AZ (Arizona) I am storing these options in an array of objects (with value/label) and setting them with the :options property. Easy so far.

      I am listing more than the 50 states for full mailing address support. Every option from here: https://www.freeformatter.com/usa-state-list-html-select.html This means my longest label is “UM (United States Minor Outlying Islands”.

      Annoyance 1: When I scroll down the options they seem to be loading from somewhere. When that happens, things jump around as the scrollbar lengthens. The biggest issue is the options area widens when I get to some of the longer labels (using Firefox on desktop). This happens even if I hardcode the options and don’t load from a variable, so it seems to be a core optimization. Is there a way to force load all the options at once?

      I also don’t quite understand the logic for how/why the options widen as they seem to be able to wrap. Is this a browser set logic or is there a way to control the width of the displayed options? If I put the longest option first then the width problem goes away, but it would needs to be in the first 5 or so options.

      Annoyance 2: If I have a state like MA selected and I click the dropdown, it opens the options at the top, not jumping to MA. Is this related to using emit-value? Is there a way to jump to the selected option?

      Annoyance 3: In a normal HTML dropdown I can type a character to jump to a state or cycle through them. For example: https://codepen.io/carlnunes/pen/yhiEo Click the dropdown then type ‘M’ to jump to Maine. Hit M again to go to the next ‘M’ state in the list. This doesn’t work on q-select. I imagine I can replicate it using a filter/autocomplete function, but that seems like overkill.

      Thanks for any insight.

      posted in Help
      J
      jyagmin
    • "Will-change memory consumption is too high" warning on Firefox

      Has anyone else run into this warning message in the console on Firefox?

      Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1093664 px). Occurrences of will-change over the budget will be ignored. app

      I am playing around with datatables in 1.0.0-beta.20. I only have about 100 rows of data and started to get this message after adding the multiple selection code from the example here: https://v1.quasar-framework.org/vue-components/table

      After reading about the error in general, I can’t tell if this is my code, a Quasar bug/bad optimization or Firefox complaining needlessly. Has anyone run across this issue?

      EDIT: Doing some testing revealed this is happening specifically when I style a span within a column’s cells using “white-space: pre;” The warning goes away if I change my scoped CSS to “white-space: normal”.

      posted in Help
      J
      jyagmin
    • RE: Laravel + Quasar 1.0 with Quasar CLI

      @stefanvh Thank you so much for this! I’ve found your starter kit very helpful while learning Quasar alongside the whole Vue/Laravel stack.

      I am stuck on a preFetch issue that maybe you can shed some light on. I have made minimal changes to your auth code but the preFetch doesn’t seem to being do its job. If I refresh the browser on a page requiring authorization or otherwise try to authenticate via a token, the router pushed the user to the login page before the token is validated. Tracking the issue, the router.beforeEach code from boot/auth.js seems to be firing before the preFetch block of code returns in the App.vue. I am having trouble understanding if this is a bug in your code or if I have something setup wrong - I thought the idea of preFetch was to avoid having to fuss with promises to avoid this exact issue, but there aren’t a lot of examples out there I can find or relate to how your code is structured. Was there a specific reason the router.beforeEach was parsed out into auth.js?

      Thanks again for the great starter kit!

      posted in Starter Kits
      J
      jyagmin