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

    Flex grid scaling when centered

    Help
    1
    1
    103
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • mboeni
      mboeni last edited by

      Hi there

      I am tinkering around with the following template:

      <template>
        <q-page class="flex items-center justify-center bg-secondary">
        <div class="logoPosition" v-if="this.$q.localStorage.getItem('uiEnableDarkMode')">
            <img alt="NX logo" src="~assets/nexus-logo-neg.png" >
          </div>
          <div class="logoPosition" v-else>
            <img alt="NX logo" src="~assets/nexus-logo-pos.png">
        </div>
          <q-scroll-area
            :thumb-style='thumbStyle'
            :content-style='contentStyle'
            :content-active-style='contentActiveStyle'
            style="width: 100%;"
            class="fill-window">
           <div class="q-pt-sm flex items-center justify-center" :style="{ color: localTextColor1 }">
              <div class="row">
                  <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
                    NEWS 1
                  </div>
                  <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
                    NEWS 2
                  </div>
                  <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
                    NEWS 3
                  </div>
              </div>
              <div class="row">
                  <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
                    NEWS 4
                  </div>
                  <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
                    NEWS 5
                  </div>
                  <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
                    NEWS 6
                  </div>
              </div>
            </div>
          </q-scroll-area>
        </q-page>
      </template>
      

      Expected behavior:

      • When resizing the app, the ‘news’ boxes scale to max-width and back to min-width AND move to stay centered (actually, I have glommed that idea from the Discord App - check out the “Activity” tab and resize the UI to see the effect I want)

      Current behavior:

      • The boxes stay centered but do not scale up to max-width or down min-width. They stay at the default width.

      How do I achieve that effect (scaling to max-width / min-width AND staying centered)?

      Cheers,
      Michael

      1 Reply Last reply Reply Quote 0
      • First post
        Last post