How to remove padding or margin in Vuetify?
up vote
0
down vote
favorite
The doc tells me I can use a helper class to change padding/margin. I want to remove padding from an input field, so the class I need is pa-0 ({property}{direction}-{size}):
<v-text-field v-model="mon" pa-0 solo></v-text-field>
JSFiddle here
Doesn't work. Any idea?
EDIT: I realise I obtain a completely different markup in my JSFiddle compared to my local setup, which compounds my confusion:
Markup generated by Vuetify locally (here I want to remove vertical padding inside the <input> element and horizontal padding on <div class="v-input__slot"> element):
<div class="v-input v-text-field v-text-field--enclosed v-text-field--outline v-input--is-label-active v-input--is-dirty theme--light">
<div class="v-input__control">
<div class="v-input__slot" style="">
<div class="v-text-field__slot">
<input type="text" pa-0="">
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>
</div>
Markup generated by Vuetify on JSFiddle using the exact same line of Vuetify code (<v-text-field v-model="mon" pa-0 outline></v-text-field>):
<div class="input-group input-group--text-field">
<div class="input-group__input">
<input outline="" pa-0="" tabindex="0" type="text">
</div>
<div class="input-group__details">
<div class="input-group__messages"></div>
</div>
</div>
The lack of examples throughout the docs REALLY doesn't help.
javascript html vuetify.js
edited Nov 19 at 22:41
mihai
23.2k73968
asked Nov 17 at 21:09
drake035
459123993
|
show 2 more comments
up vote
0
down vote
favorite
The doc tells me I can use a helper class to change padding/margin. I want to remove padding from an input field, so the class I need is pa-0 ({property}{direction}-{size}):
<v-text-field v-model="mon" pa-0 solo></v-text-field>
JSFiddle here
Doesn't work. Any idea?
EDIT: I realise I obtain a completely different markup in my JSFiddle compared to my local setup, which compounds my confusion:
Markup generated by Vuetify locally (here I want to remove vertical padding inside the <input> element and horizontal padding on <div class="v-input__slot"> element):
<div class="v-input v-text-field v-text-field--enclosed v-text-field--outline v-input--is-label-active v-input--is-dirty theme--light">
<div class="v-input__control">
<div class="v-input__slot" style="">
<div class="v-text-field__slot">
<input type="text" pa-0="">
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>
</div>
Markup generated by Vuetify on JSFiddle using the exact same line of Vuetify code (<v-text-field v-model="mon" pa-0 outline></v-text-field>):
<div class="input-group input-group--text-field">
<div class="input-group__input">
<input outline="" pa-0="" tabindex="0" type="text">
</div>
<div class="input-group__details">
<div class="input-group__messages"></div>
</div>
</div>
The lack of examples throughout the docs REALLY doesn't help.
javascript html vuetify.js
edited Nov 19 at 22:41
mihai
23.2k73968
asked Nov 17 at 21:09
drake035
459123993
could you provide a pen?
– Boussadjra Brahim
Nov 17 at 23:58
Yes, I updated my question with a demo
– drake035
Nov 18 at 16:29
you're talking about the padding inside or outside of the text-field?
– Boussadjra Brahim
Nov 18 at 16:41
I edited my question again: the markup on JSFiddle and on my local setup are completely different... On my local setup, I want to remove vertical padding inside the<input>element and horizontal padding on<div class="v-input__slot">element.
– drake035
Nov 18 at 19:30
1
it's not attribute, but class:class="pa-0 ma-0"
– Traxo
Nov 18 at 20:49
|
show 2 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
The doc tells me I can use a helper class to change padding/margin. I want to remove padding from an input field, so the class I need is pa-0 ({property}{direction}-{size}):
<v-text-field v-model="mon" pa-0 solo></v-text-field>
JSFiddle here
Doesn't work. Any idea?
EDIT: I realise I obtain a completely different markup in my JSFiddle compared to my local setup, which compounds my confusion:
Markup generated by Vuetify locally (here I want to remove vertical padding inside the <input> element and horizontal padding on <div class="v-input__slot"> element):
<div class="v-input v-text-field v-text-field--enclosed v-text-field--outline v-input--is-label-active v-input--is-dirty theme--light">
<div class="v-input__control">
<div class="v-input__slot" style="">
<div class="v-text-field__slot">
<input type="text" pa-0="">
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>
</div>
Markup generated by Vuetify on JSFiddle using the exact same line of Vuetify code (<v-text-field v-model="mon" pa-0 outline></v-text-field>):
<div class="input-group input-group--text-field">
<div class="input-group__input">
<input outline="" pa-0="" tabindex="0" type="text">
</div>
<div class="input-group__details">
<div class="input-group__messages"></div>
</div>
</div>
The lack of examples throughout the docs REALLY doesn't help.
javascript html vuetify.js
edited Nov 19 at 22:41
mihai
23.2k73968
asked Nov 17 at 21:09
drake035
459123993
The doc tells me I can use a helper class to change padding/margin. I want to remove padding from an input field, so the class I need is pa-0 ({property}{direction}-{size}):
<v-text-field v-model="mon" pa-0 solo></v-text-field>
JSFiddle here
Doesn't work. Any idea?
EDIT: I realise I obtain a completely different markup in my JSFiddle compared to my local setup, which compounds my confusion:
Markup generated by Vuetify locally (here I want to remove vertical padding inside the <input> element and horizontal padding on <div class="v-input__slot"> element):
<div class="v-input v-text-field v-text-field--enclosed v-text-field--outline v-input--is-label-active v-input--is-dirty theme--light">
<div class="v-input__control">
<div class="v-input__slot" style="">
<div class="v-text-field__slot">
<input type="text" pa-0="">
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>
</div>
Markup generated by Vuetify on JSFiddle using the exact same line of Vuetify code (<v-text-field v-model="mon" pa-0 outline></v-text-field>):
<div class="input-group input-group--text-field">
<div class="input-group__input">
<input outline="" pa-0="" tabindex="0" type="text">
</div>
<div class="input-group__details">
<div class="input-group__messages"></div>
</div>
</div>
The lack of examples throughout the docs REALLY doesn't help.
javascript html vuetify.js
javascript html vuetify.js
edited Nov 19 at 22:41
mihai
23.2k73968
asked Nov 17 at 21:09
drake035
459123993
edited Nov 19 at 22:41
mihai
23.2k73968
asked Nov 17 at 21:09
drake035
459123993
edited Nov 19 at 22:41
mihai
23.2k73968
edited Nov 19 at 22:41
mihai
23.2k73968
edited Nov 19 at 22:41
mihai
23.2k73968
23.2k73968
asked Nov 17 at 21:09
drake035
459123993
asked Nov 17 at 21:09
drake035
459123993
asked Nov 17 at 21:09
drake035
459123993
459123993
could you provide a pen?
– Boussadjra Brahim
Nov 17 at 23:58
Yes, I updated my question with a demo
– drake035
Nov 18 at 16:29
you're talking about the padding inside or outside of the text-field?
– Boussadjra Brahim
Nov 18 at 16:41
I edited my question again: the markup on JSFiddle and on my local setup are completely different... On my local setup, I want to remove vertical padding inside the<input>element and horizontal padding on<div class="v-input__slot">element.
– drake035
Nov 18 at 19:30
1
it's not attribute, but class:class="pa-0 ma-0"
– Traxo
Nov 18 at 20:49
|
show 2 more comments
could you provide a pen?
– Boussadjra Brahim
Nov 17 at 23:58
Yes, I updated my question with a demo
– drake035
Nov 18 at 16:29
you're talking about the padding inside or outside of the text-field?
– Boussadjra Brahim
Nov 18 at 16:41
I edited my question again: the markup on JSFiddle and on my local setup are completely different... On my local setup, I want to remove vertical padding inside the<input>element and horizontal padding on<div class="v-input__slot">element.
– drake035
Nov 18 at 19:30
1
it's not attribute, but class:class="pa-0 ma-0"
– Traxo
Nov 18 at 20:49
could you provide a pen?
– Boussadjra Brahim
Nov 17 at 23:58
could you provide a pen?
– Boussadjra Brahim
Nov 17 at 23:58
Yes, I updated my question with a demo
– drake035
Nov 18 at 16:29
Yes, I updated my question with a demo
– drake035
Nov 18 at 16:29
you're talking about the padding inside or outside of the text-field?
– Boussadjra Brahim
Nov 18 at 16:41
you're talking about the padding inside or outside of the text-field?
– Boussadjra Brahim
Nov 18 at 16:41
I edited my question again: the markup on JSFiddle and on my local setup are completely different... On my local setup, I want to remove vertical padding inside the
<input> element and horizontal padding on <div class="v-input__slot"> element.– drake035
Nov 18 at 19:30
I edited my question again: the markup on JSFiddle and on my local setup are completely different... On my local setup, I want to remove vertical padding inside the
<input> element and horizontal padding on <div class="v-input__slot"> element.– drake035
Nov 18 at 19:30
1
1
it's not attribute, but class:
class="pa-0 ma-0"– Traxo
Nov 18 at 20:49
it's not attribute, but class:
class="pa-0 ma-0"– Traxo
Nov 18 at 20:49
|
show 2 more comments
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
use spacing helpers:
class="ma-0" removes marginsclass="pa-0" removes paddingclass="ma-0 pa-0" removes both
Note that these are also props but only for some (grid) components so for example:<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.
Classes are added on top-level element so if in some components you can't remove child-element(s) spacing with these classes, then likely you need to target relevant elements with CSS.
To avoid using !important, add custom class on the component and inspect element which you want to edit and then check what's used for targeting it - for example .v-input__slot (we only need highlighted target):
Then replace it like so (custom-text-field is arbitrary custom class applied to the component)
.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
padding: 0;
}
answered Nov 20 at 19:02
Traxo
3,94511438
But even<v-text-field class="pa-0"><v-text-field>doesn't work: codepen.io/Draikin1/pen/jQZqYV. There is really no way to remove these paddings/margins without overriding manually? :/
– drake035
Nov 21 at 15:01
@drake035 Can you be more specific which ones you want removed? With classes most likely no, but perhaps you want to addsingle-lineproperty so it's centered? codepen. (It was not clear to me what your goal was because vuetify versions in reproductions did not match)
– Traxo
Nov 21 at 15:29
I want to remove vertical padding inside the<input>element and horizontal padding on<div class="v-input__slot">. Currently I'm doing it with super ugly !important CSS rules on.v-input__slot { ... }andinput { ... }but I'm hoping there's some more decent solution available...
– drake035
Nov 21 at 18:03
@drake035 I don't think there are classes (at least not now) to remove those paddings because it's probably not common use-case to remove those specific paddings (for example it's probably not common design to have cursor hugging the left border which is apparently what you are trying to do). Thus it's nothing weird about having to use your own CSS from time to time. Tho you probably want to add custom class to that v-text-field and then target CSS specific to that class children so there are no side effects e.g..custom-text-field .v-input__slot(unless you want it globally ofc).
– Traxo
Nov 21 at 18:14
1
that's helpful, thank you very much!
– drake035
Nov 21 at 20:14
|
show 3 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53355605%2fhow-to-remove-padding-or-margin-in-vuetify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
accepted
use spacing helpers:
class="ma-0" removes marginsclass="pa-0" removes paddingclass="ma-0 pa-0" removes both
Note that these are also props but only for some (grid) components so for example:<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.
Classes are added on top-level element so if in some components you can't remove child-element(s) spacing with these classes, then likely you need to target relevant elements with CSS.
To avoid using !important, add custom class on the component and inspect element which you want to edit and then check what's used for targeting it - for example .v-input__slot (we only need highlighted target):
Then replace it like so (custom-text-field is arbitrary custom class applied to the component)
.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
padding: 0;
}
answered Nov 20 at 19:02
Traxo
3,94511438
But even<v-text-field class="pa-0"><v-text-field>doesn't work: codepen.io/Draikin1/pen/jQZqYV. There is really no way to remove these paddings/margins without overriding manually? :/
– drake035
Nov 21 at 15:01
@drake035 Can you be more specific which ones you want removed? With classes most likely no, but perhaps you want to addsingle-lineproperty so it's centered? codepen. (It was not clear to me what your goal was because vuetify versions in reproductions did not match)
– Traxo
Nov 21 at 15:29
I want to remove vertical padding inside the<input>element and horizontal padding on<div class="v-input__slot">. Currently I'm doing it with super ugly !important CSS rules on.v-input__slot { ... }andinput { ... }but I'm hoping there's some more decent solution available...
– drake035
Nov 21 at 18:03
@drake035 I don't think there are classes (at least not now) to remove those paddings because it's probably not common use-case to remove those specific paddings (for example it's probably not common design to have cursor hugging the left border which is apparently what you are trying to do). Thus it's nothing weird about having to use your own CSS from time to time. Tho you probably want to add custom class to that v-text-field and then target CSS specific to that class children so there are no side effects e.g..custom-text-field .v-input__slot(unless you want it globally ofc).
– Traxo
Nov 21 at 18:14
1
that's helpful, thank you very much!
– drake035
Nov 21 at 20:14
|
show 3 more comments
up vote
2
down vote
accepted
use spacing helpers:
class="ma-0" removes marginsclass="pa-0" removes paddingclass="ma-0 pa-0" removes both
Note that these are also props but only for some (grid) components so for example:<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.
Classes are added on top-level element so if in some components you can't remove child-element(s) spacing with these classes, then likely you need to target relevant elements with CSS.
To avoid using !important, add custom class on the component and inspect element which you want to edit and then check what's used for targeting it - for example .v-input__slot (we only need highlighted target):
Then replace it like so (custom-text-field is arbitrary custom class applied to the component)
.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
padding: 0;
}
answered Nov 20 at 19:02
Traxo
3,94511438
But even<v-text-field class="pa-0"><v-text-field>doesn't work: codepen.io/Draikin1/pen/jQZqYV. There is really no way to remove these paddings/margins without overriding manually? :/
– drake035
Nov 21 at 15:01
@drake035 Can you be more specific which ones you want removed? With classes most likely no, but perhaps you want to addsingle-lineproperty so it's centered? codepen. (It was not clear to me what your goal was because vuetify versions in reproductions did not match)
– Traxo
Nov 21 at 15:29
I want to remove vertical padding inside the<input>element and horizontal padding on<div class="v-input__slot">. Currently I'm doing it with super ugly !important CSS rules on.v-input__slot { ... }andinput { ... }but I'm hoping there's some more decent solution available...
– drake035
Nov 21 at 18:03
@drake035 I don't think there are classes (at least not now) to remove those paddings because it's probably not common use-case to remove those specific paddings (for example it's probably not common design to have cursor hugging the left border which is apparently what you are trying to do). Thus it's nothing weird about having to use your own CSS from time to time. Tho you probably want to add custom class to that v-text-field and then target CSS specific to that class children so there are no side effects e.g..custom-text-field .v-input__slot(unless you want it globally ofc).
– Traxo
Nov 21 at 18:14
1
that's helpful, thank you very much!
– drake035
Nov 21 at 20:14
|
show 3 more comments
up vote
2
down vote
accepted
up vote
2
down vote
accepted
use spacing helpers:
class="ma-0" removes marginsclass="pa-0" removes paddingclass="ma-0 pa-0" removes both
Note that these are also props but only for some (grid) components so for example:<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.
Classes are added on top-level element so if in some components you can't remove child-element(s) spacing with these classes, then likely you need to target relevant elements with CSS.
To avoid using !important, add custom class on the component and inspect element which you want to edit and then check what's used for targeting it - for example .v-input__slot (we only need highlighted target):
Then replace it like so (custom-text-field is arbitrary custom class applied to the component)
.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
padding: 0;
}
answered Nov 20 at 19:02
Traxo
3,94511438
use spacing helpers:
class="ma-0" removes marginsclass="pa-0" removes paddingclass="ma-0 pa-0" removes both
Note that these are also props but only for some (grid) components so for example:<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.
Classes are added on top-level element so if in some components you can't remove child-element(s) spacing with these classes, then likely you need to target relevant elements with CSS.
To avoid using !important, add custom class on the component and inspect element which you want to edit and then check what's used for targeting it - for example .v-input__slot (we only need highlighted target):
Then replace it like so (custom-text-field is arbitrary custom class applied to the component)
.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
padding: 0;
}
answered Nov 20 at 19:02
Traxo
3,94511438
edited Nov 21 at 18:46
answered Nov 20 at 19:02
Traxo
3,94511438
answered Nov 20 at 19:02
Traxo
3,94511438
answered Nov 20 at 19:02
Traxo
3,94511438
3,94511438
But even<v-text-field class="pa-0"><v-text-field>doesn't work: codepen.io/Draikin1/pen/jQZqYV. There is really no way to remove these paddings/margins without overriding manually? :/
– drake035
Nov 21 at 15:01
@drake035 Can you be more specific which ones you want removed? With classes most likely no, but perhaps you want to addsingle-lineproperty so it's centered? codepen. (It was not clear to me what your goal was because vuetify versions in reproductions did not match)
– Traxo
Nov 21 at 15:29
I want to remove vertical padding inside the<input>element and horizontal padding on<div class="v-input__slot">. Currently I'm doing it with super ugly !important CSS rules on.v-input__slot { ... }andinput { ... }but I'm hoping there's some more decent solution available...
– drake035
Nov 21 at 18:03
@drake035 I don't think there are classes (at least not now) to remove those paddings because it's probably not common use-case to remove those specific paddings (for example it's probably not common design to have cursor hugging the left border which is apparently what you are trying to do). Thus it's nothing weird about having to use your own CSS from time to time. Tho you probably want to add custom class to that v-text-field and then target CSS specific to that class children so there are no side effects e.g..custom-text-field .v-input__slot(unless you want it globally ofc).
– Traxo
Nov 21 at 18:14
1
that's helpful, thank you very much!
– drake035
Nov 21 at 20:14
|
show 3 more comments
But even<v-text-field class="pa-0"><v-text-field>doesn't work: codepen.io/Draikin1/pen/jQZqYV. There is really no way to remove these paddings/margins without overriding manually? :/
– drake035
Nov 21 at 15:01
@drake035 Can you be more specific which ones you want removed? With classes most likely no, but perhaps you want to addsingle-lineproperty so it's centered? codepen. (It was not clear to me what your goal was because vuetify versions in reproductions did not match)
– Traxo
Nov 21 at 15:29
I want to remove vertical padding inside the<input>element and horizontal padding on<div class="v-input__slot">. Currently I'm doing it with super ugly !important CSS rules on.v-input__slot { ... }andinput { ... }but I'm hoping there's some more decent solution available...
– drake035
Nov 21 at 18:03
@drake035 I don't think there are classes (at least not now) to remove those paddings because it's probably not common use-case to remove those specific paddings (for example it's probably not common design to have cursor hugging the left border which is apparently what you are trying to do). Thus it's nothing weird about having to use your own CSS from time to time. Tho you probably want to add custom class to that v-text-field and then target CSS specific to that class children so there are no side effects e.g..custom-text-field .v-input__slot(unless you want it globally ofc).
– Traxo
Nov 21 at 18:14
1
that's helpful, thank you very much!
– drake035
Nov 21 at 20:14
But even
<v-text-field class="pa-0"><v-text-field> doesn't work: codepen.io/Draikin1/pen/jQZqYV. There is really no way to remove these paddings/margins without overriding manually? :/– drake035
Nov 21 at 15:01
But even
<v-text-field class="pa-0"><v-text-field> doesn't work: codepen.io/Draikin1/pen/jQZqYV. There is really no way to remove these paddings/margins without overriding manually? :/– drake035
Nov 21 at 15:01
@drake035 Can you be more specific which ones you want removed? With classes most likely no, but perhaps you want to add
single-line property so it's centered? codepen. (It was not clear to me what your goal was because vuetify versions in reproductions did not match)– Traxo
Nov 21 at 15:29
@drake035 Can you be more specific which ones you want removed? With classes most likely no, but perhaps you want to add
single-line property so it's centered? codepen. (It was not clear to me what your goal was because vuetify versions in reproductions did not match)– Traxo
Nov 21 at 15:29
I want to remove vertical padding inside the
<input> element and horizontal padding on <div class="v-input__slot">. Currently I'm doing it with super ugly !important CSS rules on .v-input__slot { ... } and input { ... } but I'm hoping there's some more decent solution available...– drake035
Nov 21 at 18:03
I want to remove vertical padding inside the
<input> element and horizontal padding on <div class="v-input__slot">. Currently I'm doing it with super ugly !important CSS rules on .v-input__slot { ... } and input { ... } but I'm hoping there's some more decent solution available...– drake035
Nov 21 at 18:03
@drake035 I don't think there are classes (at least not now) to remove those paddings because it's probably not common use-case to remove those specific paddings (for example it's probably not common design to have cursor hugging the left border which is apparently what you are trying to do). Thus it's nothing weird about having to use your own CSS from time to time. Tho you probably want to add custom class to that v-text-field and then target CSS specific to that class children so there are no side effects e.g.
.custom-text-field .v-input__slot (unless you want it globally ofc).– Traxo
Nov 21 at 18:14
@drake035 I don't think there are classes (at least not now) to remove those paddings because it's probably not common use-case to remove those specific paddings (for example it's probably not common design to have cursor hugging the left border which is apparently what you are trying to do). Thus it's nothing weird about having to use your own CSS from time to time. Tho you probably want to add custom class to that v-text-field and then target CSS specific to that class children so there are no side effects e.g.
.custom-text-field .v-input__slot (unless you want it globally ofc).– Traxo
Nov 21 at 18:14
1
1
that's helpful, thank you very much!
– drake035
Nov 21 at 20:14
that's helpful, thank you very much!
– drake035
Nov 21 at 20:14
|
show 3 more comments
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53355605%2fhow-to-remove-padding-or-margin-in-vuetify%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
could you provide a pen?
– Boussadjra Brahim
Nov 17 at 23:58
Yes, I updated my question with a demo
– drake035
Nov 18 at 16:29
you're talking about the padding inside or outside of the text-field?
– Boussadjra Brahim
Nov 18 at 16:41
I edited my question again: the markup on JSFiddle and on my local setup are completely different... On my local setup, I want to remove vertical padding inside the
<input>element and horizontal padding on<div class="v-input__slot">element.– drake035
Nov 18 at 19:30
1
it's not attribute, but class:
class="pa-0 ma-0"– Traxo
Nov 18 at 20:49