Why do I have such a big distance between my select box and it's selectable content ?
I'm using Vuetify in VueJS component in Laravel 7.
<template>
<v-app class="container">
<v-data-table
hide-default-header
hide-default-footer
:headers="headers"
:items="items"
:items-per-page="filter.items_per_page"
#click:row="getData"
no-data-text="No data."
dense
style="background: transparent"
>
<template
v-slot:footer
v-if="items.length"
>
<v-row no-gutters>
<v-col cols="2">
<v-select
:items=[10,50,100]
v-model="filter.items_per_page"
#change="onPageChange(1)"
label="Rows per page"
outlined
dense
></v-select>
</v-col>
</v-row>
</template>
</v-data-table>
</v-app>
</template>
=== EDIT ===
Vuetify variables are loaded as below:
resources/sass/app.scss
#import '~vuetify/dist/vuetify.min.css';
#import '~#mdi/font/css/materialdesignicons.min.css';
Related
I'm using vuetify and have this:
<v-container
class="d-flex justify-center mb-6"
:color="$vuetify.theme.dark ? 'grey darken-3' : 'grey lighten-4'"
flat
tile
>
<v-row justify="center">
<v-col>
<h1>This is an about page</h1>
</v-col>
</v-row>
<v-row justify="center">
<v-col>
<p>
The logo is licensed with the
<a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
Creative Commons License</a
>
and is provided by
<a href="https://www.iconfinder.com/laurareen/" target="_blank">
iconfinder</a
>
</p>
</v-col>
</v-row>
</v-container>
It renders like this:
How can I make this render 2 rows instead???
I tried adding sm="12" to each column but same thing.
to have a better understanding about vuetify's grid system you can read the doc here.
but in short according to the doc:
v-container provides the ability to center and horizontally pad your site’s contents.
you don't need to set class="d-flex justify-center" on this element.
also according to v-container API page, this component does not accept flat and tile as prop.
remove these props and classes and you should be good.
check the demo below:
Vue.config.productionTip = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-row justify="center">
<v-col>
<h1>This is an about page</h1>
</v-col>
</v-row>
<v-row justify="center">
<v-col>
<p>
The logo is licensed with the
<a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
Creative Commons License</a>
and is provided by
<a href="https://www.iconfinder.com/laurareen/" target="_blank">
iconfinder</a>
</p>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>
I have a code pen inside this code pen I have vuetify 2.2.15.
I've used footer as follow:
<div id="app">
<v-app>
<v-content>
<v-container>
<v-card>
<v-card-text>
Expected to align at bottom
</v-card-text>
</v-card>
</v-container>
<v-content>
<v-footer>
<v-col
class="text-center"
>
footer
</v-col>
</v-footer>
</v-app>
</div>
In the real code running on the web, this footer is aligned at the absolute bottom. But in the code pen, the footer is NOT aligned at the absolute bottom, but just follow the previous component relatively.
Is there any missing stack I should have used? Thank you for your suggestion.
you should use absolute in your v-footer like:
<v-footer absolute>
<v-col class="text-center">
footer
</v-col>
</v-footer>
absolute prop applies position: absolute to the component.
also you should move </v-content> after your footer
your final code should be like:
<div id="app">
<v-app>
<v-content>
<v-navigation-drawer app></v-navigation-drawer>
<v-container>
<v-card
>
<v-card-text
>
Expected to align at bottom
</v-card-text>
</v-card>
</v-container>
<v-footer absolute>
<v-col
class="text-center"
>
footer
</v-col>
</v-footer>
</v-content>
</v-app>
</div>
I am working on a dashboard project where I want to present several widgets on the dashboard. one of these is to show the admins a visualisation of their active/idle devices and since the whole project is vuetify based, I am trying to do this with v-progress-linear component. But for some reason it doesn't show the progress properly even if I am not changing the value for the bar. Below is my code and a screen shot of the result. I couldn't find any solution to this online so I assume I am missing something very basic about the component's usage or the grid layout that it is wrapped by.
Any help would be appreciated...
result
<template>
<v-container fluid class="grey lighten-5">
<v-card outlined flat class="mx-auto" align="center">
<v-icon large class="mt-5 mb-1">mdi-developer-board</v-icon>
<v-card-title class="justify-center pt-1 display-2 font-weight-black" > {{totalDevices}} </v-card-title>
<v-card-subtitle class="justify-center">Total no of Devices</v-card-subtitle>
<v-divider></v-divider>
<v-row >
<v-col>
<v-card flat>
<span class="caption" >Active: </span>
<span class="subtitle-2" >{{totalActive}}</span>
<v-progress-linear style="margin : 0 auto ;" class="mt-3" determinate color="#3cd1c2" :value="calcProgressValue('active')" ></v-progress-linear>
</v-card >
</v-col>
<v-divider vertical></v-divider>
<v-col class="d-flex justify-center">
<v-card flat>
<span class="caption">Idle: </span>
<span class="subtitle-2 align-right" >{{totalIdle}}</span>
<v-progress-linear style="margin : 0 auto ;" class="mt-3 text-xs-center" determinate color="#ffaa2c" :value="calcProgressValue('idle')" ></v-progress-linear>
</v-card>
</v-col>
</v-row>
</v-card>
</v-container>
</template>
I have 2 columns, 1 with a textarea. The code below gives me what I want except that my textarea is narrow. I want it to be the full width of the v-card. What am I missing?
See the example on codepen
<div id="app">
<v-app id="inspire">
<v-card>
<v-container fluid>
<v-layout row>
<v-flex md7>
<v-card dark color="green darken-2">
<textarea full-width rows=30 min-height=500 v-model="message">
</textarea>
</v-card>
</v-flex>
<v-flex md5 >
<v-card dark color="blue darken-2">
<pre v-highlightjs="sourcecode"><code class="html">{{message}}
</code></pre>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-app>
</div>
Props like full-width are implelemted by Vuetify components. <textarea> is HTML element, therefore it doesn't know about Vuetify 'magic' props.
<v-textarea> is what you are looking for.
https://vuetifyjs.com/en/components/textarea
Or you can use old-fasioned inline-style (quite not recommended if you can use the advantage of vuetfiy).
<textarea style="width:100%;"></textarea>
I need help with creating a text-field, which has an icon inside with a tooltip attached to the icon.
My code:
<v-text-field
v-model="url">
<span slot="label">Url
<v-tooltip bottom>
<v-icon
slot="activator"
color="primary"
dark
>home</v-icon>
<span>Tooltip</span>
</v-tooltip>
</span>
</v-text-field>
Any ideas?
Thanks.
Since v1.1 we can use append (and prepend) slots for this:
<v-text-field v-model="url" label="URL">
<v-tooltip slot="append" bottom>
<v-icon slot="activator" color="primary" dark>home</v-icon>
<span>Tooltip</span>
</v-tooltip>
</v-text-field>
Codepen
In vuetify version 2.0.7 I am using below code. It works perfectly.
<v-tooltip bottom>
<template #activator="{ on }">
<v-icon color="red" class="mr-1" v-on="on">fab fa-youtube</v-icon>
</template>
<span>Tooltip</span>
</v-tooltip>
displaying tooltip when hovering over the icon inside v-text-field
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field v-model="url" label="URL">
<v-tooltip slot="append">
<template v-slot:activator="{ on }">
<v-icon v-on="on" color="primary" dark>
mdi-home
</v-icon>
</template>
<span>Tooltip</span>
</v-tooltip>
</v-text-field>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
url: 'https://stackoverflow.com/'
}
})
</script>