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

    hazifahanail

    @hazifahanail

    0
    Reputation
    10
    Profile views
    3
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    hazifahanail Follow

    Latest posts made by hazifahanail

    • RE: Quasar Data Table in Mobile View Overflow Outside and No Responsive

      @metalsadman

      this is my q-stepper code :

      <template>
        <q-page >
          <div class="q-pa-md">
                <q-stepper flat ref="stepper" v-model="step" color="primary" :alternative-labels="alt" :contractable="contractable">
                  <q-step default name="suitabilityassessment" title="Suitability Assessment">
                    <SAT></SAT> 
                    <q-stepper-navigation v-if="!globalNavigation">
                      <q-btn color="primary" @click="$refs.stepper.goToStep('suitabilityassessment')">Calculate</q-btn>
                      <q-btn class="q-ml-sm" color="primary" @click="$refs.stepper.next()">Continue</q-btn>
                    </q-stepper-navigation>
                  </q-step>
      
                  <q-step name="applicantsetails" title="Applicant Details" subtitle="">
                    <AD></AD>
                    <q-stepper-navigation v-if="!globalNavigation">
                      <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                      <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
                    </q-stepper-navigation>
                  </q-step>
      
                  <q-step name="employment details" title="Employment Details" subtitle="">
                    <ED></ED>
      
                    <q-stepper-navigation v-if="!globalNavigation">
                      <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                      <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
                    </q-stepper-navigation>
                  </q-step>
      
                  <q-step name="fatca" title="FATCA">
                    <FATCA></FATCA>
      
                    <q-stepper-navigation v-if="!globalNavigation">
                      <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                      <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
                    </q-stepper-navigation>
                  </q-step>
      
                  <q-step name="fundinvestment"  title="Fund Investment" subtitle="">
                    <FI></FI>
      
                    <q-stepper-navigation v-if="!globalNavigation">
                      <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                      <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
                    </q-stepper-navigation>
                  </q-step>
      
      
                  <q-step name="payment" icon="account_balance_wallet" title="Payment">
                    <p>Payment -- To be continued</p>
      
                    <q-stepper-navigation v-if="!globalNavigation">
                      <q-btn class="q-ml-sm" color="primary" flat @click="$refs.stepper.previous()">Back</q-btn>
                      <q-btn color="primary" @click="$refs.stepper.next()">Continue</q-btn>
                    </q-stepper-navigation>
                  </q-step>
      
                  
      
                  <q-stepper-navigation v-if="globalNavigation">
                    <q-btn
                      v-if="step !== 'suitabilityassessment'"
                      color="primary"
                      flat
                      @click="$refs.stepper.previous()"
                    >
                      Back
                    </q-btn>
      
                    <q-btn class="q-ml-sm" color="primary" @click="$refs.stepper.next()">
                      {{ step === 'payment' ? 'Finalize' : 'Next' }}
                    </q-btn>
                  </q-stepper-navigation>
      
                  <q-inner-loading :visible="progress" />
                </q-stepper>
      
          </div>
        </q-page>
      </template>
      

      the data table is located at Fund Investment, where I call components as I shared previously.

      posted in Framework
      H
      hazifahanail
    • Quasar Data Table in Mobile View Overflow Outside and No Responsive

      Hi,

      I try to put Data Table in my components, but seems the data table is overflow outside when browser changed to mobile view.

      95aa4a8e-6d41-4634-abb2-84e3081f132d-image.png

      The code is :

      <template>
        <q-table
          title="Table Title"
          :data="tableData"
          :columns="columns"
          row-key="name"
        />
      </template>
      
      <script>
      export default {
        data: () => ({
          columns: [
            {
              name: 'desc',
              required: true,
              label: 'Dessert (100g serving)',
              align: 'left',
              field: 'name',
              sortable: true
            },
            { name: 'calories', label: 'Calories', field: 'calories', sortable: true },
            { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
            { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
            { name: 'protein', label: 'Protein (g)', field: 'protein' },
            { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
            { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
            { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
          ],
          tableData: [
            {
              name: 'Frozen Yogurt',
              calories: 159,
              fat: 6.0,
              carbs: 24,
              protein: 4.0,
              sodium: 87,
              calcium: '14%',
              iron: '1%'
            }
          ]
        })
      }
      </script>
      

      at first i thought it is because of <div class=“row”> but it doesn’t as I removed it already. Anyone have any idea why is this happening?

      posted in Framework
      H
      hazifahanail
    • Quasar Vue Cli 3 Icons not show in production

      Re: Icons not visible on build

      Hi, I’m using vue cli 3 for my project and added quasar plugin in my project. Everything went well in development mode. After I build to production and run, I found out that all icons is not showing up.

      Have any idea why is this happened? does anyone have the same problem? and how you fix this?

      Additional info : Im using typescript and tslint, also material icons

      posted in Help
      H
      hazifahanail