Моя кнопка действия продолжает изменять размер объекта grid

#html #vue.js #vuetify.js

#HTML #vue.js #vuetify.js

Вопрос:

Возможно, это простая проблема, но я совсем недавно начал работать с vuejs и veutify и добавил сеточную систему для приложения для управления проектами, над которым я работаю для школы, и когда я добавляю кнопку, она искажает панель. Я превратил ее в отдельный компонент и попытался встроить в панель проекта

Как я хочу, чтобы это выглядело. Это было до того, как я вложил компонент https://gyazo.com/04ca8e62f32f2077d739dd9f7d6b55be

Как это выглядит сейчас https://gyazo.com/919725a55ccec56e133b231404c18590

Штрих-код моего проекта

          <!-- Need to do container -->
       <v-container fluid grid-list-md text-xs-center>
         <v-layout column>
          <v-flex>
           <v-card dark color="blue">
             <v-card-text class="px-0">Need to Do</v-card-text>
             <v-flex>
         <!-- Nested-->   <AddTask />
           </v-flex>
          < /v-card>           
         </v-flex>
       </v-layout>
    </v-container>
  

Код моей кнопки

         <template>
         <v-dialog max-width="800px">
           <v-btn fab small color="cyan accent-2" bottom left block 
            absolute 
          slot="activator">
         <v-icon>add</v-icon>
         </v-btn>
            <v-card>
        <v-card-title>
            <h2>Add a Task or Project</h2>
        </v-card-title>
        <v-card-text>

        </v-card-text>
    </v-card>
    </v-dialog>
     </template>
  

Комментарии:

1. Кто-нибудь знает, что происходит?

Ответ №1:

для перемещения AddTask между <v-card-text class="px-0"> используйте приведенный ниже код для project bar codepen : https://codepen.io/anon/pen/bZPxwW

 <v-container fluid grid-list-md text-xs-center>
         <v-layout column>
          <v-flex>
           <v-card dark color="blue">
             <v-card-text class="px-0">Need to Do
 <!-- Nested-->   <AddTask />
</v-card-text>

          </v-card>           
         </v-flex>
       </v-layout>
    </v-container>