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. CWoodman
    3. Posts
    • Profile
    • Following 0
    • Followers 0
    • Topics 35
    • Posts 155
    • Best 7
    • Groups 0

    Posts made by CWoodman

    • RE: Q-table hanging browser

      @dobbel
      OK I see it. Thanks for letting me know. I’ll re-post on the new GitHub forum.

      posted in Help
      CWoodman
      CWoodman
    • RE: Q-table hanging browser

      @dobbel
      What new forum? Did I miss something important?

      posted in Help
      CWoodman
      CWoodman
    • Q-table hanging browser

      I have a component with a q-table dynamically populated. Haven’t touched it for several weeks, but all of a sudden, it hangs the browser as soon as any data is populated. I’ve tried reducing it to a single column, and adding one element to the data array - it still hangs the browser!
      I have no idea how to resolve this - any suggestions will be welcome.

      Here’s the code:

      <q-table
              class="sticky-header-column full-width full-height non-selectable"
              ref="table"
              :dense="dense"
              flat
              square
              virtual-scroll
              :virtual-scroll-sticky-size-start="30"
              :virtual-scroll-sticky-size-end="30"
              :rows-per-page-options="[0]"
              :pagination.sync="pagination"
              :data="tableItems"
              :columns="columns"
              row-key="name"
              selection="single"
              :selected.sync="selected"
              :sort-method="customSort"
              :filter="searchTerm"
              no-data-label="No items match filter and category setting"
            >
      
      posted in Help
      CWoodman
      CWoodman
    • RE: How to offer an input for only positive numbers without validation?

      Good point Scott. Thanks for reminding me of the component approach. I’ve use it a few times, but got lazy I guess.

      posted in Useful Tips (NEW)
      CWoodman
      CWoodman
    • RE: How to offer an input for only positive numbers without validation?

      Scott, your codepen works fine, but on a form with many input boxes it means a lot of extra code. A built-in feature of the q-input would make life a lot easier. Not a huge issue -just nice to have and maybe food for thought in a future update.

      posted in Useful Tips (NEW)
      CWoodman
      CWoodman
    • RE: How to offer an input for only positive numbers without validation?

      Yes, but that’s what I need - just prevent the user from entering an invalid number by accidentally holding the down arrow too long. Don’t need to show an error message.

      posted in Useful Tips (NEW)
      CWoodman
      CWoodman
    • RE: How to offer an input for only positive numbers without validation?

      It would be really handy if quasar would extend the rules so you could just write something like:
      :rules="[ val => val < 0 || val = 0]"

      posted in Useful Tips (NEW)
      CWoodman
      CWoodman
    • RE: q-table title-class not working

      @beets Yes. You’re the best! Thanks again.

      posted in Help
      CWoodman
      CWoodman
    • RE: q-table title-class not working

      Oh, one more thing…
      How can I center the text? text-align doesn’t have any effect.

      posted in Help
      CWoodman
      CWoodman
    • RE: q-table title-class not working

      @beets OK that does the trick! Thanks a bunch!

      posted in Help
      CWoodman
      CWoodman
    • RE: q-table title-class not working

      @beets OK, that works! Now the style is showing.
      But the background-color only affects the title text. How can I set the background of the containing box for the title?

      posted in Help
      CWoodman
      CWoodman
    • RE: q-table title-class not working

      Yes, removing ‘scoped’ lets it show. But I need it to be scoped.
      I have a global style in app.styl: .q-table__top, thead tr:first-child th
      This overrides the scoped style. If I comment that out in app.styl, there doesn’t seem to be any style applied unless I remove scoped from the local one.
      Is this title-class prop supposed to work?

      posted in Help
      CWoodman
      CWoodman
    • RE: q-table title-class not working

      Doesn’t help

      posted in Help
      CWoodman
      CWoodman
    • q-table title-class not working

      I have a table like this:

      <q-table
         class="non-selectable q-mx-sm q-mt-sm"
         dense
         square
         title="Default Units for new recipes:"
         title-class="table-title"
         :data="defaultMeasures"
         :columns="defaultColumns"
         hide-bottom
       >
      

      and style like this:

      <style lang="stylus" scoped>
      .table-title
        background-color: $blue-grey-1
        color: $indigo-10
      thead tr:first-child th
        background-color: $blue-grey-1
        color: $indigo-10
      </style>
      

      The thead class works fine, but the title class does not have any effect.
      What am I doing wrong?

      posted in Help
      CWoodman
      CWoodman
    • RE: Q-select with clearable - how to remove tab-index from clear button

      Forget it - found a way to allow user to clear without needing the button; the filter function can check for zero length text and clear the model.

      posted in Help
      CWoodman
      CWoodman
    • Q-select with clearable - how to remove tab-index from clear button

      I have a form with a bunch of q-selects in a table. I need the clearable button, but would be easier for user to tab out of the q-select without first stopping on the clear button. Any way to suppress that?

      posted in Help
      CWoodman
      CWoodman
    • RE: table of q-selects - how to filter

      Great! thanks.

      posted in Help
      CWoodman
      CWoodman
    • table of q-selects - how to filter

      I have a q-table and each row has a q-select. I want to have autocomplete, but unable to pass the row index to the filter function.

      The q-select includes this prop:

      @filter="filterFn(props.row.rowIndex)
      

      and the filter method looks like this:

      filterFn (val, update, abort, rowIndex) {
         if (this.tableRows[rowIndex].itemList.length <= 0 || !val || val.length < 2) {
              abort()
              return
          }
      
          update(() => {
              const needle = val.toLowerCase()
              this.options = this.tableRows[rowIndex].itemList.filter(v => v.toLowerCase().indexOf(needle) > -1)
          })
      },
      

      But the rowIndex parameter is not getting passed.

      posted in Help
      CWoodman
      CWoodman
    • RE: Jest encountered an unexpected token: <template>

      Well this is just weird!
      Vetur was showing every line with error in two of my components. After trying many things, I accidentally discovered that changing the filename fixed the problem!
      So TreeSelect.vue was full of errors starting with the <template> tag, but renaming to SelectTree.vue made them all go away!
      And now, my jest tests are working again too!
      I’ll leave this post up in case someone else falls into this weird situation.

      posted in Help
      CWoodman
      CWoodman
    • RE: Jest encountered an unexpected token: <template>

      Went back to before the Quasar upgrade, but still see the problem.
      Then re-installed jest like this, but still have the same problem…
      $ quasar ext remove @quasar/testing-unit-jest
      $ quasar ext add @quasar/testing-unit-jest

      Why is jest not recognizing <template> ??

      posted in Help
      CWoodman
      CWoodman