Html - Invisible v-row in Vuetify

Miguel
October 26, 2023
278 views
0 votes
2 Answers

I’m trying to make a simple 9×9 grid with vuetify but the last row is not showing. I can see it in the browser inspector, where it must be placed, but is not showing. Here is mi code:

<!-- main.vue -->
<v-app >
    <main-panel></main-panel>
</v-app>

<!-- MainPanel.vue -->
<div>
    <directions></directions>
</div>

<!-- Directions.vue -->
<div >
  <v-btn-toggle >
    <v-col>
      <v-row > 
        <v-btn icon="mdi-arrow-top-left-bold-box-outline"/>
        <v-btn icon="mdi-arrow-up-bold-box-outline"/>
        <v-btn icon="mdi-arrow-top-right-bold-box-outline"/>
      </v-row>
      <v-row>
        <v-btn icon="mdi-arrow-left-bold-box-outline"/>
        <v-btn icon=""/>
        <v-btn icon="mdi-arrow-right-bold-box-outline"/>
      </v-row>
      <v-row>
        <v-btn icon="mdi-arrow-top-left-bold-box-outline"/>
        <v-btn icon="mdi-arrow-up-bold-box-outline"/>
        <v-btn icon="mdi-arrow-top-right-bold-box-outline"/>
      </v-row>
    </v-col>

  </v-btn-toggle>
</div>

I can’t figure out what I’m doing wrong.

Answers

try this:`

<v-btn-toggle class="d-flex justify-center flex-column">
    <v-row>
      <v-btn icon="mdi-arrow-top-left-bold-box-outline" />
      <v-btn icon="mdi-arrow-up-bold-box-outline" />
      <v-btn icon="mdi-arrow-top-right-bold-box-outline" />
    </v-row>
    <v-row>
      <v-btn icon="mdi-arrow-left-bold-box-outline" />
      <v-btn icon="" />
      <v-btn icon="mdi-arrow-right-bold-box-outline" />
    </v-row>
    <v-row>
      <v-btn icon="mdi-arrow-top-left-bold-box-outline" />
      <v-btn icon="mdi-arrow-up-bold-box-outline" />
      <v-btn icon="mdi-arrow-top-right-bold-box-outline" />
    </v-row>
  </v-btn-toggle>

The surrounding v-btn-toggle has a fixed height of 40px, so you won’t see any content beyond that. You can override the setting, for example by using one of the height classes:

<v-btn-toggle class="h-auto">

Note also that there is fixed order in grids: v-col has to be a child of v-row, which has to be a child of v-container (see documentation). Breaking this order gives you undertermined results.

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  template: `
      <v-app>
        <v-main>
        
        <v-btn-toggle class="h-auto">
          <v-container>
            <v-row v-for="row in directionRows">
              <v-col v-for="direction in row">
                <v-btn :icon="'mdi-arrow-'+direction+'-bold-box-outline'" />
              </v-col>
            </v-row>
          </v-container>
        
        </v-btn-toggle>
        </v-main>
      </v-app>
  `,
  data(){
    
    return {
       directionRows: [
         ['top-left', 'up', 'top-right'],
         ['left', '', 'right'],
         ['bottom-left', 'down', 'bottom-right'],
       ]
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Invisible v-row in Vuetify

Answers