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
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 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>
How to remove padding from the content inside of a Vuetify Parallax?
<v-parallax src="https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg" style="min-height: 650px">
<v-row
no-gutters
align="center"
justify="center"
style="background-color: rgba(255, 255, 255, 0.6)"
>
</v-row>
https://codepen.io/mckraemer/full/eYORoBe
If Vuetify has not exposed some prop which you need, you can also do that overriding the CSS. In your case, you can put a style tag at the end of the HTML section just like below
<style>
.v-parallax__content {
padding: 0px !important;
}
</style>
it's working on your codepen
Just be careful, overriding the style .v-parralax_content only works if the tag is not scoped i.e.
A workaround for this is to create a global css file and override it there. Remember to point to it in your nuxt.config.js, for example:
css: [
'~/css/main.css'
],
I recently use Vuetify to implement some UI designs. However, I found the default input component (such as v-text-field, v-select) are too large. I found that I can adjust the width of them, but for the height and font size, how can I change them?
I have had some success using CSS transform to shrink everything:
.compact-form {
transform: scale(0.875);
transform-origin: left;
}
Just add that to your form. Its takes the font-size down to 14px (instead of 16) and shrinks the checkboxes and so on as well.
Although you can use :style bindings, to get what you want you'll have to resort to CSS.
You can use !important to "force in" your styles, but there are alternatives that can make it work without it. See demo below.
new Vue({
el: '#app'
});
#styled-input {
height: 40px;
font-size: 20pt;
}
.styled-input label[for] {
height: 40px;
font-size: 20pt;
}
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet prefetch' href='https://unpkg.com/vuetify#1.0.13/dist/vuetify.min.css'>
<script src='https://unpkg.com/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify#1.0.13/dist/vuetify.min.js'></script>
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row>
<v-flex>
<v-text-field name="input-1" label="Regular Input"></v-text-field>
<v-text-field name="input-1" label="Styled Input" id="styled-input" class="styled-input"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
I believe that one should always use native vuetify way instead of just using same or stronger CSS selectors or even make some CSS transformations to change size of the whole element...
You can look up all variables in Vuetify docs (more can be found for every component):
https://vuetifyjs.com/en/api/vuetify/#sass-variables
Make sure to check how to enable possibilty to override the variables:
https://vuetifyjs.com/en/features/sass-variables/
For example you can change font-size of text field by overriding $input-font-size: 18px; variable
https://vuetifyjs.com/en/api/v-text-field/#props
add dense
<v-text-field dense></v-text-field>
You can just reference by name as follows.
In your template code:
<v-text-field
class = "inputField input-name p-3 styled-input"
label="username"
name="username"
type="text"
:state="nameState"
v-model="credentials.username"
:rules="rules.username"
color="#01579B"
box
required
/>
In your style code:
.input-name {
background-color: #ffffff;
margin-top: 10px;
}
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>