Is there a way to customize the height and width of textarea?
It's really huge and i need it no bigger than the size of a button and also is there a way to add an icon next to the placeholder?
I tried changing rows to 1 but that doesn't do me much.
Here is my codepen: https://codepen.io/anon/pen/MdxprL
<v-flex>
<v-btn>
Hello!!
</v-btn>
<v-textarea
placeholder="can it be the size of the button above somehow? Also how can i add an icon after the placeholder end?"
rows="1">
</v-textarea>
</v-flex>
Thank you everyone in advance.
You can use style to set the width (or a wrapper div etc.. with a specific width).. You can also add an icon to the v-textarea and get tricky with user input to make it appear as part of the placeholder text.. You cannot natively add icons to placeholder text due to different fonts..
[CodePen Mirror]
Something like this should work:
new Vue({
el:'#app',
data:{
text: ''
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app">
<v-app id="inspire">
<v-flex>
<v-btn>
Hello!!
</v-btn>
<v-textarea
v-model="text"
style="width:300px;"
height="100"
:append-icon="text == '' ? 'person' : ''"
class="ml-5"
placeholder="can it be the size of the button above somehow? Also how can i add an icon after the placeholder end?"
></v-textarea>
</v-flex>
</v-app>
</div>
Related
I'm trying to set both bg-color and also text-white to a simple button, but once background color is set, there's no way I can change text color without creating a class and define the color as !important
<v-btn flat class="bg-pink text-white">
<v-icon color="white">mdi-email</v-icon>
<span>Click</span>
</v-btn>
The following link shows the code result screenshot
Click to check code result
What am I doing wrong?
Try this
<v-btn outlined flat color="primary">
<v-icon dense color="error">mdi-email</v-icon>
<span class="white--text"> Click </span>
</v-btn>
When using vuetify, bootstrap classes would conflict with vuetify classes. So you better choose vuetify classes which are of course different from bootstrap classes. Take a look at vuetify documentation for more.
This can be achieved by using bg-{color} class for background color and text color by using text-{color} class. Here is the full documentation on color pallete.
Demo :
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
}).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-20220611.0/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#vuetify/nightly#3.0.0-next-20220611.0/dist/vuetify.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<div class="text-xs-center">
<v-btn class="bg-pink">
<v-icon class="text-white">mdi-email</v-icon>
<span class="text-white">Click</span>
</v-btn>
</div>
</v-app>
</div>
As suggested by Rohìt Jíndal I changed the version to vuetify#3.0.0-beta.3 and the problem was solved. Probably it was one of the many fixes they did.
Vuetify buttons keep active state after being clicked. You need to click elsewhere on the screen to remove it. Is there a simple way of adding a timer on returning to inherit state.
I've recently gotten into programming these few last months and just now started using vuetify in my vue project. This issue is something I can solve with unnecessary amounts of code and I'de like to see how you could improve on this.
<v-app-bar app color="#44D0CD" dark>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
<v-btn #click="functionOne" light style="">
<v-icon left>mdi-plus</v-icon>
Do something
</v-btn>
<v-btn #click="functionTwo" light content="Save">
Do something else
</v-btn>
</v-app-bar>
I want it to return to the inherit state after a click. Now it stays active on click.
Turns out that the ::before pseudo element was being set to a higher opacity when the button component was focused ... a simple solution to this is to give the button a custom class and force the pseudo opacity ... here is a demo :
Vue.config.devtools = false
Vue.config.productionTip = false
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
.myClass:focus::before {
opacity: 0 !important;
}
<html>
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<body>
<div id="app">
<v-app>
<v-content>
<span>with the focus effect:</span>
<v-btn>Button</v-btn>
</v-content>
<v-content>
<span>without the focus effect:</span>
<v-btn class="myClass">Button</v-btn>
</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>
</body>
</html>
Template:
<v-btn class="yourButton" #click="yourFunction">
Do Something
</v-btn>
Style:
.yourButton.v-btn--active::before {
opacity: 0;
}
Try this:
<template>
<v-btn class="buttonOne" #click="functionOne">
Do Something
</v-btn>
</template>
<script>
.buttonOne.v-btn:focus::before {
opacity: 0 !important;
}
</script>
im my case this code:
.myClass:focus::before {
opacity: 0 !important;
}
does not work, but thank you it was inspiring then i made a little change like this :
.myClass:focus::after {
opacity: 0 !important;
}
and it works
I am trying to implement vuetify in my project. I am newbie in VueJs & vuetify too.
I am trying to use a toolbar which contains a rounded image on the right corner. But, It is not responsive. When i open developer option and decrease the screen size to that of mobile. The rounded image does not render.
I tried using plain tags but it is actually disrupting the layout.
Here is the code
VuetifyTest.vue:
<template lang="html">
<v-toolbar>
<v-toolbar-side-icon>
<!-- <v-img src="../assets/mad_logo.png" aspect-ratio="1.7"></v-img> -->
</v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-layout
align-center
justify-space-around
wrap
>
<v-avatar
:tile= false
size="36"
color="grey lighten-4"
>
<img src="../assets/static.jpeg" alt="avatar">
</v-avatar>
</v-layout>
</v-toolbar-items>
</v-toolbar>
</template>
<script lang="js">
export default {
name: 'VuetifyTest',
props: [],
mounted() {
},
data() {
return {
}
},
methods: {
},
computed: {
}
}
</script>
<style scoped >
</style>
This is how it looks like in laptop screen
This is how it looks like in mobile screen
How do i change the code to make it responsive
PS: I also tried reducing the screen size while viewing here in reduced screen size.
Even though it showed like this..
Even though the official documentation have this problem?
How do i make it responsive..
thanks!
You do not have to specify v-layout within the v-toolbar - if you remove the v-layout and replace it with just the v-avatar, it works.. Examples are below:
[CodePen Mirror]
Snippet:
new Vue({ el: "#app" })
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app>
<v-toolbar>
<v-toolbar-side-icon>
</v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-avatar :tile=false size="36" color="grey lighten-4">
<img src="https://i.pravatar.cc/300?img=3" alt="avatar">
</v-avatar>
</v-toolbar>
</v-app>
</div>
I understand how to use Vuetify's v-tooltip with the tooltip wrapping the component. However, I'm not quite sure how to have the activator button outside.
e.g. I have this (non-working code):
<v-tooltip bottom
:activator="$refs.filterBtn"
>
Filter displayed items
</v-tooltip>
<v-btn
ref="filterBtn"
icon
#click="isFilter = !isFilter"
>
<v-icon>fa-filter</v-icon>
</v-btn>
I also tried using prop activator without the v-bind:, same result
Idea: I want the button to be placed separately from tooltip in order to run unit tests. When testing, shallowMount strips anything inside <v-tooltip> so I can't test the button. The problem is I don't know how to make tooltip show up on hover (just like it does when wrapped), I do not want to trigger it with #click.
EDIT: here's codepen
How about using the v-hover UI Component. Wrap it around your button. Bind a boolean variable to the v-hover using v-model, call it buttonHovering. Then bind a boolean variable to the v-tooltip using v-model, call it showToolTip. Then use a watcher to toggle showToolTip true and false based on the value of buttonHovering. Or you can make showToolTip a computed property that always returns the value of buttonHovering. Lastly, bind the disabled attribute of the v-tooltip to the !buttonHovering property to ensure that the tooltip only displays when hovering over the button and not the tooltip's activator.
new Vue({
el: '#app',
data () {
return {
buttonHovering: false,
showToolTip: false
}
},
watch: {
buttonHovering (newVal) {
this.showToolTip = newVal
}
}
})
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.16/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-card>
<v-card-title>
<v-hover v-model="buttonHovering">
<v-btn large>
Hello
</v-btn>
</v-hover>
<v-spacer></v-spacer>
<v-tooltip left v-model="showToolTip" :disabled="!buttonHovering">
<span>Hi from over here!</span>
</v-tooltip>
</v-card-title>
</v-card>
</v-app>
</div>
Try this:
<v-tooltip bottom
v-model="filterBtnTTip"
>
Filter displayed items
</v-tooltip>
<v-btn
icon
#click="isFilter = !isFilter"
#mouseover="filterBtnTTip = true"
#mouseleave="filterBtnTTip = false"
>
<v-icon>fa-filter</v-icon>
</v-btn>
...
data () {
return {
...
filterBtnTTip: false
}
}
<v-app>
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
>
Your button
</v-btn>
</template>
<span> Your hover message </span>
</v-tooltip>
</v-app>
In my case, it was necessary to place the tooltip together with the button in one component (a custom button with a tooltip function). Therefore, I used a prop activator and added the tooltip itself directly to the button:
<template>
<v-btn
:id="id"
>
<span>
<slot></slot>
<v-tooltip
v-if="tooltipText"
:activator="`#${id}`"
top
>
{{ tooltipText }}
</v-tooltip>
</span>
</v-btn>
</template>
<script>
let id = 0;
export default {
data() {
return {
id: `custom-button-${id++}`, //This is how we get a unique id for each created button
}
}
}
</script>
According to the same scheme, you can place v-tooltip anywhere, the main thing is that at the time of mounting the "activator" already exists.
Am trying to get the value scrollHeight of a texteara filed, the problem is when i use the document object : document.querySelector("#textarea-element").scrollHeight, i have a correct value ,
but when i’ve tried to do it with refs the value is wrong and didn’t change.
I’ve made a detailed jsfiddle for these behaviors please see below:
new Vue({
el: '#app' ,
data: {
height: 'auto',
scrollHeightUsingRefsVuejs:'',
scrollHeightUsingDocumentObject: ''
},
methods:{
resizeTextarea (e) {
this.scrollHeightUsingRefsVuejs = this.$refs.messageBox.$el.scrollHeight
this.scrollHeightUsingDocumentObject = document.querySelector("#textarea-element").scrollHeight
console.log(this.scrollHeightUsingRefsVuejs, this.scrollHeightUsingDocumentObject)
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link href="https://unpkg.com/vuetify#1.0.11/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vuetify#1.0.11/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-text-field
color="cyan darken"
label="Text field"
multi-line
rows="2"
placeholder="Start typing..."
ref="messageBox"
#keydown.native="resizeTextarea"
:style="{height: height}"
id="textarea-element"
></v-text-field>
<p>
Scroll Height Using Refs Vuejs : <strong>{{ scrollHeightUsingDocumentObject}}</strong>
</p>
<p>
<span style="color:red">(Wrong)</span> Scroll Height Using Refs Vuejs : <strong>{{ scrollHeightUsingRefsVuejs }}</strong>
</p>
</v-container>
</v-content>
</v-app>
</div>
(To see the value of scrollHeight type anything if the textearea filed)
The this.$refs.messageBox.$el.scrollHeight refers to parent node input-group generated by Vuetify that’s way the value seems wrong , all we need just to add a selector to tearea node like this this.$refs.messageBox.$el.querySelector('textarea').scrollHeight