CODEWITHSUNDEEP
vue.jsnuxt.jsvuetify.js
BobiDaHombre
BobiDaHombre

Reputation: 233

Problem with placing v-app-bar content in container?

I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.

I marked with red box on screenshot where content should be. Where content needs to be

Upvotes: 5

Views: 6801

Answers (3)

mrivnak
mrivnak

Reputation: 21

I got mine to work and also keep the navbar background extended to the edge of the screen. You can put a container inside the app-bar but it messes with the flexbox of the items so you just have to put a v-row inside for them to align properly.

<template>
  <nav class="toolbar" align="center">
    <v-app-bar app>
      <v-container>
        <v-row align="center">
          <v-app-bar-title>
            <!-- Title-->
          </v-app-bar-title>
          <div>
            <!-- Left side content -->
          </div>
          <v-spacer />
          <div>
            <!-- Right side content -->
          </div>
        </v-row>
      </v-container>
    </v-app-bar>
  </nav>
</template>

<style scoped>
.v-container {
  max-width: 60% !important;
}
</style>

Upvotes: 2

Volker Rose
Volker Rose

Reputation: 1818

For others looking to only constrain the content of the v-app-bar, I found a good example over at https://vuetifyjs.com/en/examples/wireframes/constrained/ (as Ari pointed out in the comment for the main question):

<template>
  <v-app-bar app>
    <v-container class="pa-0 fill-height">
      <!-- [...] -->
    </v-container>
  </v-app-bar>
</template>

Upvotes: 1

Ari
Ari

Reputation: 6209

Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.

Make vuetify app bar items align with <v-container> body content

My solution looks like so:

enter image description here

The colors show the nav bar width adjusted to match the body. The code looks like so:

<template>
    <v-sheet color="red">
        <v-container class="pa-0">
            <v-app-bar
                    dense
                    flat
                    color="blue accent-4"
            >
                <v-btn icon>
                    <v-icon>mdi-home-outline</v-icon>
                </v-btn>
                <v-divider inset vertical></v-divider>

                <v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
                <v-spacer></v-spacer>
                <v-btn text v-text="'Sign In'"></v-btn>
                <v-btn text v-text="'Register'"></v-btn>
            </v-app-bar>
        </v-container>
    </v-sheet>
</template>

Upvotes: 2

Related Questions