I'm trying to add a file input that will open only by clicking on the icon
Only Vuetify2 works (by using hide input ), not Vuetify3
Why is this happening? What should I do when there are so many differences between versions?
<v-file-input
hide-input
truncate-length="15"
Related
I have searched the documentation but cannot seem to find how to change the style of external links in the docusaurus classic-theme. Is this possible?
Inspecting the block element in Firefox shows that all external links in navbar and footer are appended with an icon.
##a.navbar__link.navbar__item > .iconExternalLink_node_modules-\#docusaurus-theme-classic-lib-theme-Icon-ExternalLink-styles-module
How do I change the default behaviour of the classic-theme to avoid appending the external link icon?
guys. I have a small project, where i need to use Ckeditor 4 with VueJS 2.
So i downloaded all scripts from official website, but have a big problem: blur and focus event works only with last editor at the page.
Here my code, where i trying to initialize editor at the page.
<ckeditor
#blur="logEvent('blur', $event)"
:config="CKeditorConfig"
:value="editorData"
></ckeditor>
I tried to debug official ckeditor-vuejs port, and saw that each time my editor have same name.
When I try to use a v-icon, I am not able to see the icon but just a square as shown in the image attached. all the other vuetify components work fine.
I am using it just like this <v-icon> mdi-domain </v-icon>
I have tried import "#mdi/font/css/materialdesignicons.css"; in main.js but it has not worked. I dont want to use the CDN link.
It is also not showing up in the expandable vuetify table.
In my app I need the user to select a folder, then the directory path is taken and used as a string elsewhere.
Is there a relatively simple way to have a folder selector?
I'm using vuetify at the moment and had the below when I was looking for a file to upload
<v-file-input
prepend-icon="mdi mdi-paperclip"
ref="filepath"
label="Filepath"
:error-messages="filepathErrors"
hint="The filepath for the file to be processed"
required
></v-file-input>
Then I just use the ref where I need it.
Is there a simple way I can change this to a folder input?
vuetify sends the props to the underlying input. If you are using webkit, you can do
<v-file-input webkitdirectory>
That will work in chrome and electron, but not in all/older browsers
The v-btn (vuetify) component is displayed differently if it has the "nuxt" attribute (to be used as a in the nuxt.js framework).
How to fix it?
The first image is the v-btn component without the "nuxt" (as it should display normally) and the second has the attribute.
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
>
Accept and Enter
</v-btn>
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
nuxt
to="/to/url"
>
Accept and Enter
</v-btn>
When the nuxt and to attributes are added, the element changes from <button ...> to <a href="/to/url" ... >.
Unfortunately adding the two code samples to a fresh project does not show the visual difference you have.
The <a> has an additional class v-btn--router, but it doesn't cause the width difference or text alignment issues.
You can debug a little by inspecting each element in the console, looking at the Styles pane and checking for any sources of style (on the RHS) other than Vuetify ones, which are VBtn.sass & VApp.sass.
Since width is one of the problem attributes, it is also worth while checking the width value in the Computed tab.
If it is being set directly by something, you can click it open to see the source of it's value (for example, height is set to 44px by classes .v-btn:not(.v-btn--round).v-size--large in the file VBtn.sass).