CODEWITHSUNDEEP
vue.jsvuetify.js
Jiahui Chen
Jiahui Chen

Reputation: 105

How to make Appbar transparent and with no padding in Vuetify

How do I get rid of the padding separating the toolbar from the content?

I would like to achieve the same result like the picture below

Expectation:

A codepen example: https://codepen.io/aaha/pen/qBbVNWG

What I got: My result

This is my App.vue file

     <v-app>
       <app-navigation></app-navigation>
    
        <v-main>
          <v-content class="ma-0 pa-0">
            <div class="d-flex flex-wrap justify-center" width="900">
              <img src="https://picsum.photos/300/300"/>
              <img src="https://picsum.photos/600/300"/>
              <img src="https://picsum.photos/700/300"/>
              <img src="https://picsum.photos/200/300"/>
              <img src="https://picsum.photos/400/300"/>
              <img src="https://picsum.photos/500/300"/>
            </div>
          </v-content>
   
        </v-main>
      </v-app>

And this is my AppNavigation file - basically, the toolbar component:

<v-toolbar color="transparent" flat>

  <router-link to="/">
    <v-toolbar-title class="pr-10"> {{ appTitle }} </v-toolbar-title>
  </router-link>

  <v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
  <v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
  <v-btn class="hidden-sm-and-down" text rounded to="/about"> About </v-btn>

  <v-spacer class="hidden-sm-and-down" ></v-spacer>
    <v-btn class="hidden-sm-and-down" outlined rounded to="/sign-up"> SIGN UP</v-btn>
    <v-btn class="hidden-sm-and-down" outlined rounded to="/log-in"> LOG IN </v-btn>

</v-toolbar>

Upvotes: 2

Views: 1056

Answers (1)

Blackraspberryyy
Blackraspberryyy

Reputation: 2134

Add absolute and width="100%" to the <v-toolbar/>.

<v-toolbar flat color="transparent" absolute width="100%">
...
</v-toolbar>

Demo:

enter image description here

Upvotes: 2

Related Questions