Hi

So I’ve been building my app with quasar for a while now and stumbled across something which I just can’t figure out.

I have a tabs component with tab panes. The viewheight is supposed to be one pagefold. If the area with the text (see picture) overflows the 100vh it’s supposed to scroll.
It shows the scrollbar (see arrows) but doesn’t cut off.

The tabs components seems to ignore the container height of 100vh-50px set by the q-page component.

Any help? Many thanks!

This is what I’m trying to achieve within my scope : https://codepen.io/stephenbunch/pen/KWBNVo

Stripped code:

<template lang="html">
  <q-page v-if="bounty" :style-fn="fixPageHeight" class=" white-text">
      <div class="col-auto wrap q-px-xl">
        ...
        </div>
      <div class="col-auto q-px-xl bounty-subheader">
        ...
      </div>
        <q-tabs class="col-auto" animated swipeable color="gradient2" align="justify">
           <q-tab default name="info" slot="title" icon="fas fa-info-circle" label="Info" />
           <q-tab name="commits" slot="title" icon="fas fa-lightbulb" label="Commits" />
           <q-tab disabled name="comments" slot="title" icon="fas fa-comment" label="Comments" />
           <q-tab-pane class="column" name="info">
             <div class="row">
               <div class="col-lg-9 scroll-area">
                 <div class="bounty-inf items-start row">
                   <div class="col-lg-4 column">
                     ...
                   </div>
                   <div class="col-lg-8 column">
                       <strong v-if="bounty.attachments.length>0" class="attachments-title">Attachments</strong><br />
                     <div class="attachments">
                       ...
                     </div>
                   </div>
                 </div>
                 <div class="row blog-summary">
                   <div class="col-auto"v-html="bounty.description"></div>
                 </div>
               </div>
               <div class="col-lg-3 column bounty-activity">
                 <strong>Activity</strong><br />
                  ...
               </div>
             </div>
           </q-tab-pane>
           <q-tab-pane class="row col-auto " name="commits">
             <div class="flex commits row">
               <div class="col-lg-9 q-px-xl">
                 <q-list v-if="bounty.proposals.length>0" highlight inset-separator no-border>
                  ...
                 </q-list>
               </div>
               <div class="col-lg-3 bounty-activity">
                 <strong>Activity</strong><br />
                 ...
               </div>
             </div>
             </div>
           </q-tab-pane>
           <q-tab-pane class="row col-auto " hidden disabled name="comments"></q-tab-pane>
         </q-tabs>
  </q-page>
</template>

running build will indeed give the error, quite annoying though

Hi,

I have a cordova app in quasar. I use cordova dev mode emulated on android (android studio).
Whenever It builds the first time I have no text showing up in any component that uses a layout.
The authentication screen and register screens work perfectly (no layout, standalone components), but from the moment I log in after the first build I get no text on the profile page (which uses a default layout ). Some of the text is static, some of it is dynamic.

If I then hard refresh using chrome remote device tools and log in again everything works perfectly.

The weirdest thing is that emoticons do show up.

What can be the cause of this? Something with text encoding perhaps?

A little bit of sleep does wonders for the mind.

<q-select
  float-label="Repo Owner"
  v-model="pr.owner"
  :options="repoOwners"
  :disable="formProgress.ownerSelected"
  :after="[{
    icon: 'arrow_forward',
    handler () {
      formProgress.ownerSelected = true
    }
  }]"
  />

Hello,

I have a basic single-selecion q-select component. I wish to disable the field after a selection has been made and confirmed after clicking the button defined in the :after property.
How exactly can I achieve this?

<q-select
  float-label="Repo Owner"
  v-model="pr.owner"
  :options="repoOwners"
  :after="[{
    icon: 'arrow_forward',
    handler () {
      formProgress.ownerSelected = true
      //disable field ????
    }
  }]"
  />

Thank you!