I'd like to use a v-menu component in Vuetify to appear below a text field, but I need to be able to trigger the menu from a method. I can do that with v-model on the menu, but the menu appears at the top left corner of the screen. If I add absolute :position-x="0" :position-y="0" to the v-menu, I can change the position but it's still relative to the entire screen, not the parent div that it's declared in. When I look at the final HTML, it looks like the menu has been put as a child of the v-app container, which explains why it ends up where it does.
Is there some way I can position the menu relative to a page element while still triggering the menu from a method? Or, to put it another way, is it possible to position the menu relative to an element/component that has nothing to do with the menus activation?
<div style="position:relative">
<v-text-field v-model="orgName" label="Organisation Name"></v-text-field>
<v-menu v-model="showMenu">
<v-list>
<v-list-item v-for="(entry, i) in entries" :key="i">
<v-list-item-title>{{ entry }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
Related
I am using vuetify 3.0.0.
I would like to have a v-select or v-autocomplete where the dropdown menu is styled as variant="tonal".
For other v-menus, I have achieved this by wrapping the v-menu in a v-card and setting the v-card to variant="tonal". For the v-select, I can only envision to set the list-items to variant="tonal". However, the top and bottom of the list remain in their original color. Also, I cannot find a menu slot in the documenation that I could potentially use to wrap the menu with a v-card.
Any idea on how to best do that?
https://codepen.io/drhouse82/pen/PoaNgEd
<v-autocomplete
color="primary"
:items="itemList"
v-model="selectedValue">
<template v-slot:item="{ props, item }">
<v-list-item v-bind="props" variant="tonal">
</v-list-item>
</template>
</v-autocomplete>
To make the hover effect of a v-btn node in vuetify more visible I use the following code:
<v-hover v-slot:default="{ hover }" open-delay="200" class="ma-1">
<v-btn color="primary"
v-if="..." v-on:click="..." :elevation="hover ? 16 : 2"
>
Button Title
</v-btn>
</v-hover>
It is working, but in Chrome I get the warning "v-hover should only contain a single element".
Any advice to avoid this?
The v-if removes the <v-btn/> element on the DOM so when showBtn is set to false, <v-hover/> is saying that it has no child.
Use v-show, instead of v-if, so the <v-btn/> element will not be removed entirely from the DOM. It will just hide it (similar to display: none;). OR put the v-if in the <v-hover/> element instead.
See this demo at codesandbox.
In Vuetify components-lib there is a hint that on I can bring my own custom v-list-item with slot:item
// item
// Description
// Define a custom item appearance
// Props
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}
How can I achive that? because when I do
<template v-slot:item="data">
<book :book="data.item"></book>
</template>
Vutifiey warp-up it with own v-list-item and I want to put some custom class on part ot the v-list-items
It is a very common scenario to add some custom styling in the v-auto-complete's list. But, there is no way of avoiding v-list/v-list-item as Vuetify does not give you the full control of the dropdown menu.
As you may have noticed that dropdown menu is like the v-menu and the input element for v-autocomplete is the activator of the dropdown menu. So, this is how the v-autocomplete component works:
Vuetify creates a dropdown menu and add its own logic(HTML, CSS, JS) into it.
it gives users the slots to add custom markup/components inside the v-list-items
That is why there is no way of avoiding the v-list component.
I have attached a pen to help you in better understanding how you can use a custom component inside v-list/v-list-item of v-autocomplete: https://codepen.io/abdullah-shabaz/pen/MWwZNYW
If you are having some problems with styling your book component please tell me. I am sure I can help you with it.
I know this is an old question, I was looking for the same thing so if anybody needs this in the future, the answer is:
<template v-slot:item="{item, on, attrs}">
<v-list-item
v-bind="attrs"
v-on="on"
>
<v-list-item-avatar>
<v-icon v-if="attrs.inputValue">mdi-checkbox-marked</v-icon>
<v-icon v-else>mdi-checkbox-blank-outline</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
I'm trying to catch the click of a v-switch prior to it flipping to see if a preexisting condition has been met. While logging e.target of the event I am getting
<div class="v-input--selection-controls__ripple primary--text"></div>
as the result but every now and then I get
<input aria-checked="true" id="input-24" role="switch" type="checkbox" aria-disabled="false" value="Arizona">
Am I missing something in this or is this unexpected behavior?
Codepen Example
What is happening is that you're clicking on two different elements.
When you click on the ball or around it in the grey area you click on this element:
But when you click outside it but still inside the input you click on this other element:
However, both of then capture you click.
You could change your implementation to capture the change event:
<template v-slot:item.ia="{ item }">
<v-switch
v-model="ia_array"
:key="item.id"
:label="item.state"
:value="item.state"
#change="onChange"
></v-switch>
</template>
I would like to add a toolbar button to CKEditor that shows the current color of the selection. Is this possible?
So far I managed to add a new toolbar button by following this tutorial and the colorbutton plugin, but I can't find any example of a toolbar button with dynamic presentation.
You could use a transparent image for the button and set the background color of the button span within your plugins functionality.
It looks like it might be easiest to get that span by finding the anchor tag with the title that you assigned (the tooltip) and then set the background color of the child span with id=cke_icon.
This is what the HTML for one of my plugin buttons looks like, the name of the particular plugin that the button calls isn't used, it's functions are assigned variable function numbers, so the plugin name isn't available:
<a id="cke_33" class="cke_off"
onclick="CKEDITOR.tools.callFunction(71, this); return false;"
onfocus="return CKEDITOR.tools.callFunction(70, event);"
onkeydown="return CKEDITOR.tools.callFunction(69, event);"
onblur="this.style.cssText = this.style.cssText;" aria-haspopup="true"
aria-labelledby="cke_33_label" role="button" hidefocus="true" tabindex="-1"
title="Block Background Color">
<span class="cke_icon" style="background-image:url
(/ckeditor_3.6.1/plugins/cwmarcontentbackcolor/images/contentbackcolor16x16.png?t=B5GJ5GG);
background-position:0 0px;">
</span>
<span id="cke_33_label" class="cke_label">Block Background Color</span>
<span class="cke_buttonarrow"> </span>
</a>
It will be a fair amount of work if you want to determine the color each time the user selects a portion of the content area because they could select multiple elements with multiple colors. Even if they simply click in the content area, you may have to walk up the DOM tree to find the element that the cursor position is inheriting it's color from.
I helped with a plugin for another question that had a different goal, but it involved firing each time a selection was made, creating an object based on the selection, and walking up the DOM tree to look at the class assigned to the elements. You may be able to modify it to fit your goals:
How to block editing on certain part of content in CKEDITOR textarea?