skip to Main Content

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.

enter image description hereenter image description here

2

Answers


  1. 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>
    

    `

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search