Flex grid scaling when centered



  • 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


Log in to reply