Quasar Framework QCardの高さを揃えて見た目を良くする

Quasar Frameworkでは行、列を制御するために row・columnといったクラスが予め用意されています。

display: flex

など自分で書かずとも、 class=“row"と書くだけでよく、とても効率よくコーディングが進められます。 次のように書くと縦３列に分かれたFlexboxが作成できます。レスポンシブに対応しており、スマートフォンのように狭い幅であれば１列３行に変わります。

<div class='row'>
  <div class='col-xs-12 col-md-4'>some data</div>
  <div class='col-xs-12 col-md-4'>some data</div>
  <div class='col-xs-12 col-md-4'>some data</div>
</div>

高さを揃えるには items-stretchではなくheight:100% #

とまあ、ここまでは前置きです。rowやcolといった便利なクラスですが、要素の高さが違うと見た目が不格好になるというデメリットがあります。

よく見る光景です。高さを揃えるには items-stretchクラスを使うとのことが書かれていますが、うまくいきませんでした。 （機能しないわけではないが別の問題が起こる）

columnsクラスとrowクラスをネストさせたり色々考えましたが、答えは意外とシンプルでした。

height: 100%　これをつけるだけで解決です。

こちらは紆余曲折して色々試行錯誤していたときのコードです。失敗例なので真似しないほうが良いです。

<div class="column">
  <div class="row items-stretch">
    <div v-for="template in templateIdAndName" :key="template.id" class="col-xs-12 col-md-3 q-pa-xs">
      <q-card style="cursor:pointer; height: 100%" @click="addTemplateRow(template)" :class="{'myDisableCard' : template.useNodeCnt === 0}">
        <q-card-section class="text-bold bg-teal-4 dense">{{ template.name }}</q-card-section>
        <q-card-section>
          計測可能なフォーム:{{ template.useNodeCnt }}件
          <div v-for="node in template.nodes" :key="node.key">
            {{ node.label }}
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</div>

最終的にheight: 100%だけで良いことがわかったため、余分ものは全部排除しました。

<div class="row">
  <div v-for="template in templateIdAndName" :key="template.id" class="col-xs-12 col-md-3 q-pa-xs">
    <q-card style="cursor:pointer; height: 100%" @click="addTemplateRow(template)" :class="{'myDisableCard' : template.useNodeCnt === 0}">
      <q-card-section class="text-bold bg-teal-4 dense">{{ template.name }}</q-card-section>
      <q-card-section>
        計測可能なフォーム:{{ template.useNodeCnt }}件
        <div v-for="node in template.nodes" :key="node.key">
          {{ node.label }}
        </div>
      </q-card-section>
    </q-card>
  </div>
</div>