CODEWITHSUNDEEP
vue.jsvuetify.js
Vinicius Kammradt
Vinicius Kammradt

Reputation: 66

How to remove inside space from v-btn in Vuetify.js?

Hi there! [SOLVED]

I'm trying to recreate a page using Vue.js and Vuetify, but I don't know how can I get the following result with my buttons:

This is my goal: https://i.sstatic.net/umN4U.png

This is what I have now: https://i.sstatic.net/rFwED.png

As you can see, I just need to remove the RED part inside the buttons, to make them stay smaller and together, as the following: https://i.sstatic.net/Lr44Z.png

How can I remove this 'inside padding' from a v-btn?

This is my code:

<v-card>
  <v-flex xs12>
    <v-img src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"/>
  </v-flex>
  <v-card-text>
    {{ card.content }}
  </v-card-text>
  <v-card-actions>
    <v-btn small outline color="secondary" class="ma-0 text-capitalize">View</v-btn>
    <v-btn small outline color="secondary" class="ma-0 text-capitalize">Edit</v-btn>
  </v-card-actions>
</v-card>

Thanks yall!!

Upvotes: 1

Views: 4433

Answers (2)

Vinicius Kammradt
Vinicius Kammradt

Reputation: 66

Solving the problem

How to do it, thanks to Traxo. Creating the following class it's enough:

<style scoped>
  .together{
    min-width: 0
  }
</style>

And then using it:

<v-btn small outline color="secondary" class="together ma-0 text-capitalize">Edit</v-btn>

Upvotes: 1

Ohgodwhy
Ohgodwhy

Reputation: 50787

Vue.directive('no-padding', {
  bind: (el, bindings) {
    el.style.padding = 0
  }
})

<v-btn small no-padding outline color="secondary" class="ma-0 text-capitalize">View</v-btn>

Upvotes: 0

Related Questions