CODEWITHSUNDEEP
vuetify.js
mikeb
mikeb

Reputation: 11307

Vuetify 2 rows but rendering like 2 columns

I'm using vuetify and have this:

<v-container
      class="d-flex justify-center mb-6"
      :color="$vuetify.theme.dark ? 'grey darken-3' : 'grey lighten-4'"
      flat
      tile
  >
    <v-row justify="center">
      <v-col>
        <h1>This is an about page</h1>
      </v-col>
    </v-row>
    <v-row justify="center">
      <v-col>
        <p>
          The logo is licensed with the
          <a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
            Creative Commons License</a
          >
          and is provided by
          <a href="https://www.iconfinder.com/laurareen/" target="_blank">
            iconfinder</a
          >
        </p>
      </v-col>
    </v-row>
  </v-container>

It renders like this:

rendering 2 columns and not 2 rows

How can I make this render 2 rows instead???

I tried adding sm="12" to each column but same thing.

Upvotes: 1

Views: 537

Answers (1)

hamid niakan
hamid niakan

Reputation: 2871

to have a better understanding about vuetify's grid system you can read the doc here.

but in short according to the doc:

v-container provides the ability to center and horizontally pad your site’s contents.

you don't need to set class="d-flex justify-center" on this element.

also according to v-container API page, this component does not accept flat and tile as prop.

remove these props and classes and you should be good.

check the demo below:

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-row justify="center">
          <v-col>
            <h1>This is an about page</h1>
          </v-col>
        </v-row>
        <v-row justify="center">
          <v-col>
            <p>
              The logo is licensed with the
              <a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
              Creative Commons License</a>
              and is provided by
              <a href="https://www.iconfinder.com/laurareen/" target="_blank">
              iconfinder</a>
            </p>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

Upvotes: 1

Related Questions