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

    eric-naguras

    @eric-naguras

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

    eric-naguras Follow

    Latest posts made by eric-naguras

    • Layout problem on Safari iOS - Chrome Android works fine

      Hi,

      I made a layout with the Quasar framework (quasar 1.9.9 - extras 1.6.0).
      My layout works fine on Chrome Android (Oreo) but is not working correctly on Safari iOS (12.4.5)
      The project can be found at https://github.com/eric-naguras/quasar-test and a hosted version which can be opened in a browser on Android and iOS is at http://test.naguras.com/#/

      The problem is in the Drawer. I have a long list with q-list-items so I wanted to show the user that he/she can scroll up or down through the list. I did this by adding a chevron icon above and below the list. I have also added the quasar scroll directive in quasar.conf.js and I show or hide the chevron icons depending on the scroll position.

      The android version works exactly as I planned but the iOS version has problems scrolling (it’s unresponsive and if you scroll to far it will show white boxes above or below in the drawer)

      Since I am only using the build-in Quasar position classes I think it’s a bug in Quasar.
      Does someone has this problem too and is there a fix or work-around?

      The methods used and the html markup can be found below.

      There should be 2 screenshots; the first is Safari - iOS, the second is Chrome on Android.

      methods: {
          showTopScrollIcon() {
            console.log(this.scrolPosition);
            return this.scrolPosition > 20;
          },
          showBottomScrollIcon() {
            console.log(this.scrolPosition);
            return this.scrolPosition < 100;
          },
          goto(link) {
            this.$router.push(link);
          },
          scrolled(position) {
            this.scrolPosition = position;
          }
        }
      
          <div
              class="bg-secondary absolute-top"
              style="margin-top:60px;height:20px"
            >
              <q-icon
                v-if="showTopScrollIcon()"
                style="margin-left:120px"
                color="primary"
                :name="evaArrowheadDownOutline"
              />
            </div>
      

      safari on iOS

      chrome on android

      posted in Framework
      E
      eric-naguras
    • RE: How to center icons in a (bottom) toolbar?

      This is doing what I want:

      <q-toolbar slot="footer" class="justify-around">
                  <div style="display:block">
                      <q-btn flat icon="home" class="col-3" @click="$router.push('/properties')">
                          Properties
                      </q-btn>
                  </div>
                  <div style="display:block">
                      <q-btn flat icon="people" class="col-3" @click="$router.push('/customers')">
                          Customers
                      </q-btn>
                  </div>
                  <div style="display:block">    
                      <q-btn flat icon="contact_phone" class="col-3" @click="$router.push('/agents')">
                          Agents
                      </q-btn>
                  </div>
              </q-toolbar>
      posted in Help
      E
      eric-naguras
    • How to center icons in a (bottom) toolbar?

      0_1506157694411_android.png
      How do I center buttons with icons on a (bottom) toolbar?
      Screenshot above is from an android device with remote debugging.

      <q-toolbar slot="footer" class="mobile-only">
                  <q-btn flat icon="home" @click="$router.push('/properties')">
                      Properties
                  </q-btn>
                  <q-btn flat icon="people" @click="$router.push('/customers')">
                      Customers
                  </q-btn>
                  <q-btn flat icon="contact_phone" @click="$router.push('/agents')">
                      Agents
                  </q-btn>
       </q-toolbar>
      posted in Help
      E
      eric-naguras