I'm trying to add a v-switch to my web app.
But it displays wrong (label should be next to v-switch, but as you can see from the picture)
Any ideas on how to fix this?
I am not sure about your source code but ideally it should work. Here is the Demo :
Vue.use(Vuetify);
new Vue({
el: '#app',
data () {
return {
switch1: false,
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-container>
<v-switch
v-model="switch1"
label="Test Switch Label"
></v-switch>
</v-container>
</v-app>
</div>
Please let me know what challenge you are facing as per above code snippet.
Solved it with this easy-CSS trick!
<style>
.v-input__control label {
top: 0px;
}
</style>
Related
How can I center the text inside a v-chip component vertically?
Since it's a vuetify component, I looked at the documentation but there's no such property for this.
<v-chip
v-if="this.drawerNodeData.type == 'Telecom'"
:color="telecom"
text-color="white"
class="chips"
>
{{ this.drawerNodeData.type }}
</v-chip>
As you said styles for chips class are not yet implemented. In that case your code should work as per the requirement as by default chip text center aligned vertically and horizontally. Here is the demo :
new Vue({
el: '#app',
vuetify: new Vuetify()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#2.0.1/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"/>
<div id="app">
<v-app id="inspire">
<v-container>
<v-chip color="primary" text-color="white">Default</v-chip>
</v-container>
</v-app>
</div>
It is my first "try" with Vue + vue-select.
I have imported Vue and vue-select like it is explained in the vue-select documentation.
And my first try is this simple HTML page :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- include VueJS first -->
<script src="https://unpkg.com/vue#latest"></script>
<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select#latest"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-select#latest/dist/vue-select.css"
/>
</head>
<body>
<div id="app">
<h1>Vue Select</h1>
<v-select :options="options"></v-select>
</div>
<script>
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
options: ["foo", "bar", "baz"],
},
});
</script>
</body>
</html>
When I try this page, I have these errors in the console :
What it is wrong in this first try? When I understand this first example, it will be easier for the rest.
I just checked your code and seems this issue is due to the vue version you are using. I just used version 2.* and it is working.
Demo :
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
selected: 'foo',
options: ["foo", "bar", "baz"]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.3/vue-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css"/>
<div id="app">
<h1>Vue Select</h1>
<v-select :options="options" v-model="selected"></v-select>
</div>
Update : Here is the Vue 3 version of v-select
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
template: '#app-template',
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),
}).use(vuetify).mount('#app')
<script src="https://unpkg.com/vue#next/dist/vue.global.js"></script>
<script src="https://unpkg.com/#vuetify/nightly#3.0.0-next-20220604.0/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#vuetify/nightly#3.0.0-next-20220604.0/dist/vuetify.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<script type="text/x-template" id="app-template">
<v-app>
<v-container fluid>
<v-select
:items="items"
></v-select>
</v-container>
</v-app>
</script>
<div id="app"></div>
I haven't decided any popover for Vue.
Device is Touch devices
For touch devices I need click event for opening of popover.
Scenario:
I used Vue bootstrap popover or tooltip
it is stuck to the screen when I am scrolling.
I need to remove when scrolling
You can use this snippet:
new Vue({
el: "#app",
methods: {
do_sth() {
this.$root.$emit('bv::hide::popover')
}
},
created () {
window.addEventListener('scroll', this.do_sth);
},
});
body .wrapper {
padding: 100px 20px;
min-height: 2000px;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<div class="wrapper">
<b-button
href="#"
tabindex="0"
v-b-popover.click="'Popover content'"
title="Popover title"
>
Link button with popover directive
</b-button>
</div>
</div>
Vuetify v-icon usually takes its color with a class. In my case, I am trying to change its color with a css class menu-icon when my router link is active.
<v-btn icon class="menu-btn">
<router-link to="/client/dashboard">
<v-icon class="menu-icon">
mdi-gauge-full
</v-icon>
<div class="menu-titles">Dashboard</div>
</router-link>
</v-btn>
.router-link-active .menu-icon {
color: #2F80ED ;
}
The problem is v-icon does not seems to accept css color attribute. Is there a way to change it with css ?
<v-icon> uses the value of its CSS color property and maps it into the fill property of it's SVG children (using fill="currentColor").
So you only need to set the color CSS value on .v-icon, and it will work:
Simple example:
<v-icon large>mdi-domain</v-icon>
In CSS:
i.v-icon.v-icon {
color: red;
}
Working example:
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
i.v-icon.v-icon {
color: red;
}
<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">
<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-content>
<v-icon>mdi-domain</v-icon>
</v-content>
</v-app>
</div>
I advise against using !important.
By default, Vuetify sets the color of icons using a 2 × class specificity (i.e: .theme--light.v-icon), so we need to use something slightly higher i.v-icon.v-icon ( 1 × el + 2 × class ).
Obviously, if you want to do it inline you can always go with the anti-pattern of inline style:
<v-icon large style="color: red;">mdi-domain</v-icon>
Like any anti-pattern, it's not recommended. But it's possible.
Maybe this can help
<v-icon large color="green darken-2">mdi-domain</v-icon>
Or if you want to change color using internal css, you can add a style tag like this at the end.
<style lang="scss" >
.classname {
color: red !important;
}
</style>
In my case, didn't work putting the color's name, but it worked putting the hexadecimal value:
<v-icon color="#933">mdi-close</v-icon>
Despite the fact that in the documentation of the Vuetify icons, you find that it works by putting the names. But is required put v-app tag in vue template. Let it start this way:
<template>
<v-app>
<v-icon color="red">mdi-close</v-icon>
</v-app>
</template>
You should add to your css file:
.theme--light.v-icon,
.theme--dark.v-icon {
color: inherit !important;
}
I am having an issue with Vuetify not breaking my flex boxes like expected when viewing on small screen. I expect the form to break into 3 parts each spanning 12 cols when viewing on a small screen. However what happens is it just retains it's size from the original. It does not stack verticly like expected. The template code is below;
EDIT: I can tell that vuetify is updating the the breakpoints, but the layout does not change. If I set a computed property to this.$vuetify.breakpoint.lgandup I can see that when changing the screen size the boolean changes to false when it should and back to true when it should. But the layout does not change.
EDIT: I've updated my question with some more information and tried to include all relevant files.
EDIT: I want to add that I have figured out a small work around, by adding 'wrap'.. <v-layout row wrap> however it seems that this would not be needed since I'm already telling vuetify to break that into a full 12 col span on small screens, so there shouldn't be anything to wrap. Still looking for more insight here.
main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '#mdi/font/css/materialdesignicons.css'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
// Override default theme for Vuetify
Vue.use(Vuetify, {
iconfont: 'mdi',
theme: {
"primary": "#673ab7",
"secondary": "#757575",
"accent": "#d500f9",
"error": "#ff1744",
"info": "#d500f9",
"success": "#4caf50",
"warning": "#ff9100"
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
app.vue
<template>
<div id="app">
<v-app>
<nav-draw/>
<nav-bar/>
<v-content>
<v-container fluid>
<v-layout row>
<v-flex x12 sm12 md12 lg1 xl1>
Test
</v-flex>
<v-flex xs12 sm12 md12 lg9 xl9>
{{ this.$vuetify.breakpoint.mdAndDown }}
</v-flex>
<v-flex xs12 sm12 md12 lg2 xl2>
{{ this.$vuetify.breakpoint.lgAndUp }}
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer app>2019 .com</v-footer>
</v-app>
</div>
</template>
<script>
import NavDraw from '#/components/NavDraw'
import NavBar from '#/components/NavBar'
export default {
components: {NavDraw, NavBar }
}
</script>
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath
%>favicon.ico">
<title>FranchiseFaves</title>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Any help is appreciated!
try to remove the <div id="app"> in you app.vue. because you already call it in
public/index.html