Question 394739 in CSS Question posted in
Some basic documentation can be found here.

Css – Margin or padding for an SVG image in v-app-bar?

This should be a dead-easy question, and maybe isn’t specifically vue/vuetify but I’m ramping up and this would help my understanding.

New to vue/vuetify, starting a brand-new front end. I’m using v-app-bar

Here’s my app.vue:

<template>
  <v-app>
    <v-app-bar :elevation="2">
      <!-- Figure out how to get padding around all sides of the SVG -->
      <v-img src="~/assets/test.svg" position="left" class="ma-2"></v-img>
      <template v-slot:append>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>
    </v-app-bar>
  </v-app>
</template>

I’d like to use an SVG as the logo in the navbar header, not text (as the vuetify examples show)

It’s working fine except I can’t figure out how to get a top+bottom margin around the image. The class="ma-2" works fine to give me left (and I assume right) margins, but doesn’t ever give me top+bottom margin. Neither did padding.

I expect I’m missing something incredibly obvious… or, as I said I’m brand new to vue/vuetify, is there a better way I should be putting this logo image in the navbar?

screenhot of navbar with svg, showing no top+bottom padding

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Wrapping it in v-responsive did the trick:

    <template>
  <v-app>
    <v-app-bar :elevation="2">
      <v-responsive class="pa-2">
        <v-img src="~/assets/test.svg" position="left"></v-img>
      </v-responsive>
      <template v-slot:append>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>
    </v-app-bar>
  </v-app>
</template>

  2. 0

    Since you are using the svg as the title, have you tried the app-title slot?

    <v-app-bar :elevation="2">
  <v-app-bar-title><v-img src="~/assets/test.svg" position="left"></v-img></v-app-bar-title>
  <template v-slot:append>
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
  </template>
</v-app-bar>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search