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>
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 wanted to change the style of b-input buefy but when I try changing the design it doesn't work.
Here is my code.
<b-field>
<b-input
placeholder="Username"
size="is-medium"
></b-input>
</b-field>
<style>
input.input.is-medium {
border: 1px solid red;
}
</style>
If you want to change all your buttons, take a look at Bulma's variables.
Buefy uses Bulma CSS
https://bulma.io/documentation/elements/button/#variables
Here, you will want to change $button-border-color
Late answer.
The selector seems correct, so I'm not sure why it doesn't work for you. Your example works in my environment (Buefy 0.9.4, Vue 2.6.10).
You might try a less specific selector:
input {
border: 1px solid red;
}
Or... (cringe) use the important flag:
input.input.is-medium {
border: 1px solid red !important;
}
To customize just a single input, try assigning a ref attribute to the <b-input> and then use JS to update the style. Note that <b-input> creates a <div> that wraps the <input>, so we have to go hunting for it using $el and querySelector.
Buefy HTML
<b-input
ref="myInput"
placeholder="Username"
size="is-medium"
></b-input>
VueJS
mounted() {
this.$refs.myInput.$el.querySelector('input').style.border = "1px solid red";
},
Vuetify v-data-table doesn't increase font size.
How can I modify the table's content for me to be able to increase the font size of the text because its too small and hard to read.
<v-data-table
:headers="headers"
:items="allCareers"
:search="search"
sort-by="calories"
class="elevation-1 display-2 white--green"
>
<template v-slot:item.action="{ item }">
<v-icon small class="mr-2" #click="editArticle(item.ARTICLE_NUM)">edit</v-icon>
<v-icon small #click="deleteSingleArticle(item.ARTICLE_NUM)">delete</v-icon>
</template>
</v-data-table>
Style
<style scoped>
table.v-table thead tr th {
font-size: 24px;
}
table.v-table tbody tr td {
font-size: 24px;
}
</style>
You can see that specificity is required to get what you want here. Using the code pen from the Vuetify documentation, these changes work on the v-data-table. Keep in mind that Vuetify has some weird CSS workarounds required without using loaders, like needing to use instead of or using !important tags.
https://vuetifyjs.com/en/components/data-tables
(select "Edit in CodePen" to test these)"
.v-data-table th {
font-size: 20px;
}
.v-data-table td {
font-size: 20px;
}
Details on loaders and CSS details:
Vuetify - CSS not working (taking effect) inside component
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.
I am newly using vuetify. I want to change font-size of <v-radio> button and its label. Directly applying css not working. So i searched for some answer, but those answer are very short. Which i'm unable to apply them. Can anyone help me to explain how do i change font-size in vuetify? TIA
Updated:
<template>
<v-flex xs6>
<p class="title-input">Jenis Kelamin</p>
<v-radio-group id="id-gender" class="no-space" v-model="genderSelect" :mandatory="false" row #change="genderAction">
<v-radio class="gender" label="Pria" value="Pria"></v-radio>
<v-radio class="gender" label="Wanita" value="Wanita"></v-radio>
</v-radio-group>
<span class="text-error" v-show="genderError">Mohon diisi</span>
</v-flex>
</template>
<style scoped src="../style/Shortform.css">
</style>
Got the answer. In my css file all i have to do is
.customClass >>> label
adding those >>> icon solved the problem.
If you want to use a style tag in the .vue file you have the option to remove scoped from the style tag and target the label directly.
<style>
.v-label {
font-size: desired size
}
</style>
If it happens that you have a separate .css file you can still use this method and ignore the <style> tag
.v-label {
font-size: desired size
}
This worked for me:
.small-radio i {
font-size: 19px;
}
.small-radio label {
font-size: 14px;
padding-left: 0px;
margin-left: -4px;
}
.small-radio .v-radio {
padding: 0px;
}
.small-radio [class*="__ripple"] {
left: 0;
}
Add v-deep:: infront if requred.
Add the style to v-radio-group:
<v-radio-group class="small-radio" v-model="radioGroup">
<v-radio
...
></v-radio>
</v-radio-group>