CODEWITHSUNDEEP
cssvuejs2vuetify.js
stormynpip
stormynpip

Reputation: 472

Changing Vuetify's Button Width And Padding

Buttons are large and going over the card width enter image description here

This should be easy, but I'm having a bit of tough time customizing the buttons inside the cards. I want to remove all the padding, so that the black border nicely encompasses the icon without any extra space in the left/right-hand sides. I've tried adding custom css and !important and directly overriding the div.btn__content, but those don't work. Any ideas to do this as simply as possible?

Reproduction Link

Upvotes: 14

Views: 49079

Answers (4)

lenooh
lenooh

Reputation: 10682

You might have to use ::v-deep

::v-deep .v-btn {
  padding-left: 12px;
  padding-right: 12px;
}

Upvotes: 1

Nightfury
Nightfury

Reputation: 91

For newer versions of Vuetify (1.2.4 and above) you need to use this:

/* turn off min-width for all buttons */
.v-btn {
  min-width: 0;
}

Upvotes: 7

user2452483
user2452483

Reputation: 377

You need to change min-width of .btn class and set padding-left: 16px of .btn-content.

Here is an example: https://codepen.io/anon/pen/zPEyLB

Upvotes: 2

thanksd
thanksd

Reputation: 55644

The issue is the min-width of the .btn class. Setting that to 0 will allow the button to be smaller than 88px. You should also just set the padding of the .btn__content to 0.

div.btn__content {
  padding: 0;
}

div.card__actions .btn {
  min-width: 0;
}

Here's an updated codepen.

Upvotes: 13

Related Questions