Posts made by CWoodman

Hoping to do a PWA if I can figure out how.

@beets Thanks. Still a long way to go!

So far it seems to work fine on my phone. I suppressed the tab splitting feature on a small screen. That was by far the most complex thing to build so far. Dragging a tab from one split to another meant having to re-build the tab’s content completely from the store so it appears to be unchanged.

Are you a member of the Quasar development team? You seem very knowledgeable about it.

No, it’s an app for soap-makers. Inventory control, recipe creation, customer invoicing, etc. Replacement for old VB app.
Website: www.soapmaker.ca
Prototype: www.woodman.ca/SM4Quasar (only the ‘supplies’ command center does anything so far)

OK. Thanks again for your help. Really appreciate it when I get stuck!

Sorry, but I’m confused…
What’s the difference between ‘mobile’ mode and ‘overlay’ mode?

Interesting. What does setting the breakpoint do then?

Nope. If I call this.$refs.drawer.belowBreakpoint my app freezes!
Best I’ve been able to do is this kludge:
const overlay = this.windowWidth < (this.breakpoint - 16) // Trial and error: breakpoint is not accurate

I think I found it:
<q-drawer ref=“drawer”

then:
this.$refs.drawer.belowBreakpoint is true or false

I need to know whether a drawer is in overlay mode so other elements can be set correctly.
I’ve set the breakpoint to 1200 and tried to determine if overlay is true by sensing the window width, but there seems to be a few pixels of uncertainty - the drawer seems to switch into overlay at about 1185 instead of 1200.
Is there a more precise way to check whether overlay mode is in effect?

@dobbel Yes it works fine. Should have upgraded a while ago. Sorry for the bother.

@dobbel Got it working. Upgraded to the latest Quasar and now it works as expected.

@dobbel OK I’ll play with it some more. Maybe start with a minimal table and add stuff I want until it breaks. Thanks. If I’m stuck, I’ll post a reply with some code.

@dobbel Removed virtual-scroll but still no horizontal scrolling. Vertical works still, so guess I don’t need the virtual-scroll unless I want a custom scrollbar.

@Shoooryuken OK I removed the auto-width. But still not getting horizontal scrolling.

I have a q-table that is too wide on mobile. I want it to provide horizontal scrolling (with first column sticky) when the window is too narrow to show all columns, but it’s not working. Just cuts off the table without showing any scrollbar.

Here’s the code:

<div class="q-pa-none col">
  <q-table
    class="sticky-header full-height non-selectable"
    ref="table"
    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"
  >
    <template v-slot:header="props">
    <q-tr :props="props">
      <q-th v-for="col in props.cols" :key="col.name" :props="props">
        {{ col.label }}
      </q-th>
    </q-tr>
  </template>
    <template v-slot:body="props">
      <q-tr class="cursor-pointer" :props="props"
      @click.native="selectRow(props.row, $event)">
        <q-td auto-width v-for="col in props.cols" :key="col.name" :props="props">
          {{ col.value }}
          <span v-if="col.name === 'stock'">
            <q-icon size="xs" :name="props.row.icon.name" :color="props.row.icon.color" class="q-pl-xs" />
          </span>
        </q-td>
      </q-tr>
    </template>
    <template v-slot:bottom>
      <div class="row" style="width: 100%">
        <div class="col-8">
          <div v-if="searchTerm">
            <div v-if="inCategoryName === allCategories">
              Showing search result {{ stockStatus }} in all categories
            </div>
            <div v-else>
              Showing search result {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
            </div>
          </div>
          <div v-else>
            <div v-if="inCategoryName === allCategories">
              Showing {{  tableItems.length }} items {{ stockStatus }} in all categories
            </div>
            <div v-else>
              Showing {{  tableItems.length }} items {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
            </div>
          </div>
        </div>
        <div class="col q-pl-sm">
          <div>
            Total value: {{ totalValueDisplay }}
          </div>
        </div>
      </div>
    </template>
  </q-table>
</div>

Opposite question… Table is set to full-width in order to fill the space available, but on an narrow window I want it to switch to horizontal scrolling, and to make the first column sticky. The only way I’ve found to get a horizontal scrollbar, is to remove the full-width class, but then how to make the table fit the space available on a wider window?

OK, found the solution - I just enclosed the table in a q-scroll-area when in mobile.

I have a q-table that takes up the entire page. In normal mode it scrolls fine, but on small screens when it switches to grid mode, it does not scroll.

Here’s my code:

<div class="q-pa-none col">
      <!-- 'non-selectable' class prevents selecting text. Can still select a row -->
      <q-table class="sticky-header full-width full-height non-selectable"
        ref="table"
        dense
        flat
        square
        :grid="$q.screen.lt.sm"
        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="selectedRow"
        :sort-method="customSort"
        :filter="searchTerm"
        no-data-label="No items match filter and category setting"
      >
        <template v-slot:header="props">
        <q-tr :props="props">
          <q-th></q-th> <!-- leave space for icon -->
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
        <template v-slot:body="props">
          <q-tr class="cursor-pointer" :props="props"
          @click.native="selectRow(props.row, $event)">
            <q-td auto-width>
              <q-icon size="xs" :name="props.row.icon.name" :color="props.row.icon.color" />
            </q-td>
            <q-td auto-width v-for="col in props.cols" :key="col.name" :props="props">
              {{ col.value }}
            </q-td>
          </q-tr>
        </template>
        <template v-slot:bottom>
          <div class="row" style="width: 100%">
            <div class="col-8">
              <div v-if="searchTerm">
                <div v-if="inCategoryName === allCategories">
                  Showing search result {{ stockStatus }} in all categories
                </div>
                <div v-else>
                  Showing search result {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
                </div>
              </div>
              <div v-else>
                <div v-if="inCategoryName === allCategories">
                  Showing {{  tableItems.length }} items {{ stockStatus }} in all categories
                </div>
                <div v-else>
                  Showing {{  tableItems.length }} items {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
                </div>
              </div>
            </div>
            <div class="col">
              <div>
                Total value: {{ totalValueDisplay }}
              </div>
            </div>
          </div>
        </template>
      </q-table>
    </div>

Any help will be appreciated.

@turigeza OK it works! And by adding the ‘virtual-scroll-sticky-size-start’ and ‘virtual-scroll-sticky-size-end’ props, I got it to show both the first and last rows when selected.

Thanks again for your help!