I have a v-combobox that I need to resize. This solution works pretty well, but I have a problem with delete icon in combobox:
How can I solve it?
Here is combobox code and styling
<v-combobox
outlined
clearable
></v-combobox>
.v-text-field .v-input__control .v-input__slot {
min-height: 30px;
}
This worked for me:
<style>
.v-text-field .v-input__control .v-input__slot {
min-height: 30px;
}
.v-text-field.v-text-field--enclosed .v-input__prepend-outer, .v-text-field
.v-text-field--enclosed .v-input__prepend-inner, .v-text-field.v-text-field--enclosed
.v-input__append-inner, .v-text-field.v-text-field--enclosed .v-input__append-outer {
margin-top: 5px;
}
</style>
Related
I am working in a "Nuxt" app and using "Vuetify" as my framework. this is the code of one of my components:
<template>
<v-text-field
color="var(--color4)"
class="px-15"
>
<template v-slot:label>
<span class="labelClass">
please enter your name
</span>
</template>
</v-text-field>
</template>
<style scoped>
.labelClass {
font-size: 1.2rem;
}
</style>
I wanted to increase the font-size of label in input. according to Vuetify ducomentation we must use "slots" for doing that. so I added a new template and "slot" to that. Then I used labelClass for the span inside that to control the font-size. the font-size changed but the problem here is that if I increase font-size (for example to 1.8rem), some parts of the text of that disappears:
And it becomes worse, if the font-size increases. I also read this question, but it did not help me. I also tried to set "height" prop for v-text-field and some classes like v-text-field__slot but they did not work for me.
The problem is, that after render the input get this css style:
.v-input input {
max-height: 32px;
}
To solve this, you simply need to overwrite this. If you don´t want to override this for every input, just add another class to your v-text-field:
<v-text-field
color="var(--color4)"
class="px-15 my-class"
>
... and then use it like this:
.v-input.my-class input {
max-height: 32px;
}
Edit: Looks like you also need to override the following style:
.v-input .v-label {
height: 20px;
line-height: 20px;
letter-spacing: normal;
}
This is the style of the label, you need to increase height and line-height. Another override needs to be done at:
.v-text-field input {
flex: 1 1 auto;
line-height: 30px;
padding: 8px 0 8px;
max-width: 100%;
min-width: 0;
width: 100%;
}
The line-height needs to be increased.
As your html in your slot is only displayed in the slot, line-height and max-width from parents affect the visible space.
you can use class="text-h3" inside
<v-text-field
v-model="item"
label="label"
class="text-h3"
></v-text-field>
I am trying to make a component with buttons inside a div, I am having issues, because the styles are not applying on the buttons, I guess I should not use slot here. Can someone guide me?
Component
<template>
<div :class="[$style.btnGroup]" v-bind="$attrs">
<slot :class="$style[variant]">/>
</div>
</template>
How I use this
<ButtonGroup variant="warning">
<button>Test</button>
<button>Test</button>
<button>Test</button>
</ButtonGroup>
I use css module
<style module>
.btnGroup button {
position: relative;
border: none;
font-weight: 400;
border-radius: 0.25rem;
cursor: pointer;
font-size: 1rem;
padding: 0.5rem 1rem;
transition: 0.1s;
}
.primary{
background: var(--primary-bg);
border: 1px solid var(--primary-bg);
color: white;
}
.warning {
background: var(--warning-bg);
border: 1px solid var(--warning-bg);
font-size: 1rem;
padding: 0.5rem 1rem;
transition: 0.1s;
color: black;
}
etc. for each variant I have different style.
You are applying the class on the button group not the buttons that are inside, to solve this instead of binding the class to the slot bind another variable and use that variable binding on each button or you can solve it through css thats why i suggested you show us the css give a class to the buttongroup the way you are doing and in css do as so:
<slot class="buttongroupclass">/>
.buttongroupclass button{
//the css you want to apply
}
I want to change the font size of "attendance",which is the content of label.
<v-checkbox
v-model="course.evaluation"
label="attendance"
></v-checkbox>
Here is what I've tried. Inside the same vue file, I added
<style>
.v-checkbox.v-label {
font-size: 10px;
}
</style>
But it didn't work. Anyone can help?
Try increasing priority by adding chaining selectors
Add a class to the checkbox
<v-checkbox
class="my-checkbox"
v-model="course.evaluation"
label="attendance"
></v-checkbox>
Then
<style>
.my-checkbox .v-label {
font-size: 10px;
}
or In case it still doesn't reflect the override then use deep selector
::v-deep .my-checkbox .v-label {
font-size: 10px;
}
You are using wrong css selectors. You may solve your problem this way:
<style>
.v-input--checkbox .v-label {
font-size: 10px;
}
</style>
But keep in mind that if your component contain more than one v-checkboxes, all of them will have their font changed.
Another solution is to override label slot this way:
<v-checkbox
v-model="course.evaluation">
<template v-slot:label>
<span style="font-size: 10px">attendance</span>
</template>
</v-checkbox>
I have tried using a vuetify class based on breakpoint it worked
<v-app :class="{'yellow': !$vuetify.breakpoint.xs}">
I have a class named pagemargin in a vue file
But when I use this class it is not working, as in the following case
<v-app :class="{'pagemargin': !$vuetify.breakpoint.xs}">
why is it not working?
<style >
.pagemargin{
margin-right: 100px;
margin-left: 100px;
color: red;
}
</style>
Add !important to your styles. Vuetify adds its default style to the whole v-app so you need to override it.
.pagemargin{
margin-right: 100px !important;
margin-left: 100px !important;
color: red !important;
}
Using !important might work, but in long term as your application gets bigger, it could be costly. You should instead, solve this by providing a CSS that has a higher specificity than that of Vuetify. I provide you with an example:
<template>
<div class="my-div">
<v-btn :class="{'my-padding': !$vuetify.breakpoint.xs}" tile outlined color="success">
View
</v-btn>
</div>
</template>
<style>
/* this wont work */
.my-div .my-padding {
padding-right: 200px;
padding-left: 200px;
}
/* this works */
.my-div .v-btn.my-padding {
padding-right: 200px;
padding-left: 200px;
}
</style>
<style scoped>
/* this also works */
.my-div .my-padding {
padding-right: 200px;
padding-left: 200px;
}
</style>
You can read more about specificity here.
I'm having trouble overriding bootstrap styles in my single file component when using bootstrap-vue
My file looks like this:
<template>
<b-tabs pills vertical>
<b-tab title="This title" title-item-class="mytab" acitve>
Some tab
</b-tab>
<b-tab title="This title 2" title-item-class="mytab">
Some other tab
</b-tab>
</b-tabs>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
I can inspect my component and I can see that the "mytab" class is being added to the li parent divs with nav-item classname but the css isn't showing up.
It works here: https://jsfiddle.net/3xwmm1qt/43/ but I'm pretty sure it's because the css is being loaded after the page renders. I'm not 100% about that.
Updated I also tried removing the 'scoped' attribute from the style tag and the css still would work. It still doesn't even show up when I inspect the div. I can still see the classname, but in the Rules tab (using FF) there's no styling for my custom classname.
Yeah the difference between the jsfiddle and your code is that you've written scoped CSS (less):
Here's how you fix it, Remove the scoped from style:
<style lang="less">
.nav-pills .mytab .nav-link:not(.active) {
background-color: red !important;
}
.nav-pills .mytab .nav-link {
background-color: blue !important;
}
.tab-content > .tab-pane {
border: 1px solid;
border-left: 0px none;
}
</style>
Scoped means that the css code will only work in this element and vue will try to do it only for the classes attached to the elements which have the class you tried to override while not being scoped means that it'll do it for the entire document hence will override bootstrap's css.