1

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.stack.imgur.com/umN4U.png

This is what I have now: https://i.stack.imgur.com/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.stack.imgur.com/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!!

Vinicius Kammradt
  • 66
  • 1
  • 9
  • 1
    you remove padding with [`pa-0`](https://stackoverflow.com/a/53373939/1981247). But seems like your problem is related to preset `min-width`, so set `min-width: 0`. – Traxo Apr 27 '19 at 18:18
  • 1
    This `style="min-width: 0"` worked just fine! Thanks man! – Vinicius Kammradt Apr 27 '19 at 21:16
  • Btw, practice here is to write answer in the answer section, not edit question with a solution. Question should only describe a problem. You can answer your own question, nothing wrong with it. – Traxo Apr 28 '19 at 10:37

2 Answers2

1

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>
Vinicius Kammradt
  • 66
  • 1
  • 9
0
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>
Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • 2
    Vuetify utilizes `pa-0` class already, no need for directive. This approach seems weird, but anyway, OP's problem seem to be related to min-width. See my comment on the question. – Traxo Apr 27 '19 at 18:19
  • Thanks for your help, I just needed `style="min-width: 0"` and now it's done. Thanks again! – Vinicius Kammradt Apr 27 '19 at 21:16