Since vuetify#2.5.0 the v-progress-circular—visible class is not applied on any progress components - meaning that just a dot is being displayed.
Is there anything I need to change from my existing pre 2.5.0 codebase to make it work?
My html code works on versions pre 2.5.0 ...
<v-progress-circular indeterminate color="muted"></v-progress-circular>
If I inspect the code, vuetify generates the following:
<div data-v-7ba5bd90="" role="progressbar" aria-valuemin="0" aria-valuemax="100" class="v-progress-circular v-progress-circular--indeterminate muted--text" style="height: 32px; width: 32px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715" style="transform: rotate(0deg);">
<circle fill="transparent" cx="45.714285714285715" cy="45.714285714285715" r="20" stroke-width="5.714285714285714" stroke-dasharray="125.664" stroke-dashoffset="125.66370614359172px" class="v-progress-circular__overlay"></circle>
</svg>
<div class="v-progress-circular__info"></div>
</div>
As you can see, the classlist for the wrapping div should also contain
v-progress-circular--visible
But it doesn't. When I add that manually in the devtools the circular progress components spins in the expected way. Without it, it just renders as a dot.
In vuetify versions pre 2.5.0 it adds the v-progress-circular--visible class fine.
Has a bug crept in when upgrading to 2.5.0 - on the documentation site I can see the spinners spinning fine ...
It must have occurred during migration between the different versions.
When I inserted a debugger statement in the vuetify directives/intersect file
https://github.com/vuetifyjs/vuetify/blob/0eec92f0/packages/vuetify/src/directives/intersect/index.ts#L30
to see what's going on, the problem magically disappeared. Perhaps it was some sort of webpacker caching thing going on?
As a quick fix, you can simply manually add the v-progress-circular--visible class on the component. From my side work fine. Can be a workarround until this was fixed by Vuetify team.
new Vue({
el: "#app",
vuetify: new Vuetify()
});
<!-- Comment this one... -->
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.5/dist/vuetify.min.css" rel="stylesheet">
<!-- ...and uncomment this one to see before 2.5 there is no bug -->
<!-- <link href="https://cdn.jsdelivr.net/npm/vuetify#2.4/dist/vuetify.min.css" rel="stylesheet"> -->
<div id="app">
<v-app>
<v-main>
<h1>Bugged one since 2.5+</h1>
<v-progress-circular
indeterminate
color="red"
></v-progress-circular>
<h1>Workaround issue for 2.5+</h1>
<v-progress-circular
indeterminate
class="v-progress-circular--visible"
color="green"
></v-progress-circular>
</v-main>
</v-app>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.5/vuetify.min.js"></script>
Related
I created a registration form that when the person presses save a load appears, I just wanted to make this load disappear when an error occurs in the form. I'm having trouble finding a solution to my problem, if you can help me I'd appreciate it.
I'm using laravel 8 on the backend
Code father:
<v-main v-on:load="toggleOverlay">
<!-- <span class="loading" v-show="loading"> -->
<v-overlay :model-value="loading" class="align-center justify-center">
<!--loading-->
<v-progress-circular :size="295" :width="30" color="green" indeterminate>
</v-progress-circular>
</v-overlay>
<!-- </span> -->
<slot />
</v-main>
i tried using ref but i don't know if i did it the right way and i tried using emit
So I'm pretty much brand new to Vuetify and Front End development, so sorry if my question is either simple or maybe even too vague.
I'm trying to build a website with Nuxt and Vuetify, but I'm having an issue with removing the padding around the edges of the pages. I've tried using different components within Vuetify such as fluid, I've tried finding and altering the container css code (which I'm not even convinced I've actually found), I've tried just about anything I have found on Stack Overflow or on the Vuetify github, but nothing is working for me.
Does anyone have some advice on how to actually go about having the container take up the whole page instead of leaving margins and padding on the side? I've spent at least 5 hours over the past 2 days trying to figure this out. This is what I currently have.
use spacing helpers:
class="ma-0" removes margins
class="pa-0" removes padding
class="ma-0 pa-0" removes both
Note that these are also props but only for some (grid) components so for example:
<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.
If in some components you can't remove spacing with these classes, then you need to target relevant elements with CSS.
Ok, so I was able to figure out what I was doing wrong.
Here
<template>
<v-app light>
<v-toolbar fixed app :clipped-left="clipped" color="deep-orange accent-3">
<v-toolbar-side-icon #click="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title v-text="title"></v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-content>
<v-container >
<nuxt/>
</v-container>
</v-content>
<v-footer :fixed="fixed" app>
</v-footer>
</v-app>
So, in my source, everything is laid out in the "default.vue" page, which is here. I was trying to alter the styling in the actual page, so like in index.vue. When I took a closer look at default.vue, I saw the v-container, which I hadn't noticed before (like I said, complete beginner, so this is all pretty new to me).
I was able to add
<style>
.container{
max-width: 100vw;
padding:0px;
}
</style>
to default.vue, which corrected the issue I was dealing with. It really just came down to understanding the template in which I'm working with, and finding the correct place to override the CSS.
They also have predefined spacing helpers, ie pa-0.
https://vuetifyjs.com/en/layout/spacing
To remove paddings from cols, you can add "no-gutters" atribute to v-row:
<v-container fluid>
<v-row no-gutters>
<v-col>
...
</v-col>
</v-row>
<v-container>
One good way to handle these scenarios is to use a fluid v-container on your main Nuxt entry point like this (default layout):
<template>
<v-app>
<v-main>
<v-container fluid>
<Nuxt /> <!-- Nuxt's entry point -->
</v-container>
</v-main>
</v-app>
</template>
And now every time you need a full-width section set the container's v-col padding to zero (best is to use pa-0 or px-0 to be specific).
For example, inside my component I have:
<template>
<v-row class="image-background">
<v-col class="pa-0">
<v-container>
<v-row>
<v-col>
<h2 class="text-h2">Some Text</h2>
</v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</template>
<style scoped>
.image-background {
background-image: url("/images/your-image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 25%;
min-height: 35vh;
}
</style>
To create a full-width section add pa-0 class to it's column element (v-col).
class of .image-background simply adds an background image taking whole width of screen (since it is inside a fluid container with no padding on it's v-col parent).
Notice how I used another container (without fluid attribute) to hold it's content in a responsive manner including it's paddings and media query breakpoints.
I am using Vuetify v2.6.1 and by the way if you're on a vanilla Vue environment this is the whole structure in one piece:
<template>
<v-app>
<v-main>
<v-container fluid>
<v-row class="some-class">
<v-col class="pa-0">
<!-- everything below will take full-width -->
<!-- unless inside another normal v-container -->
<img src="/path/to/image">
<!-- wrap other content inside another v-container -->
<v-container>
<v-row>
<v-col>
<h2 class="text-h2">Some Text</h2>
</v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
everybody.
I am using the following:
angular: 1.6.1,
angular-material: 1.1.3,
angular-ui-router: 1.0.0-rc.1
All my views are built using components and I am routing them with the UI-Router 1.x component syntax:
$stateProvider
.state('main', {
url: '/main',
component: 'main',
})
For the sake of completeness, my components are laid out as follows:
angular
.module('app.main')
.component('main', {
templateUrl: '/modules/main/main.html',
controller: MainCtrl,
})
MainCtrl.$inject = [];
function MainCtrl (){
}
My index.html is as follows:
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout="column" flex ui-view></div>
My view for the main component is irrelevant at this point as the problem starts here. If, for example, my view for main.html is as follows:
<div layout="row" flex>
Content
</div>
The div will NOT flex. If, however, it is simply added in place of the ui-view in the parent, it will flex as normal.
<body ng-app="app" layout="column" ng-cloak>
<md-toolbar layout="row" layout-align="center center">
<h1>Site Title</h1>
</md-toolbar>
<div layout-align="column" flex>
Content (THIS WORKS FINE!)
</div>
Both contain the same attributes in the inspector apart from the usual differences in using ui-view.
This also seems to be causing problems with md-content, which will only scroll if it is the element in the parent that contains the ui-view. Any nested md-contents will not scroll.
I have also tried using the original ui-router way of routing to controllers and templates which was the norm before the .component syntax.
There is a similar problem listed here:
Angular Material layout breaks when using UI-Router
It seems that this gentleman's solution was to abandon UI-Router and use ng-route. I really don't want to move away from UI-Router and am considering completely abandoning Angular-Material but would really prefer to avoid that.
Can anybody please help out with this?
I have tried all the suggestions on here I just can't seem to get mine to pop-up in front of my stylesheet in IE. Works in firefox and chrome. Here is a very basic example of my layout.
the website is gulfstreamdata dot com . If you add anything to the cart and then in the top-right click on "expand" it drops down whats in your cart, but in IE it pops-under the template. :(
<div class="vmCartModule" style="position:relative; z-index:900; ">
<div id="dropdown" style="position:absolute; z-index:901;">
</div>
</div>
I tried making both z-index values the same and i tried making the outer div higher. Tried about everything I could think of in IE developer tools to no avail.
Anyway since it is positioned in a position you know, maybe you could detach it from the parent div, and move it after its actual parent div, so it will be drawn on front (also removing the z-index values).
<div class="vmCartModule">
</div>
<div id="dropdown" style="position:absolute; z-index:1;">
</div>
you shouldn't have problems in positioning it relative to the body, since it's on top right of the site.
EDIT
If it pops under your template, move that div to the bottom of your website, maybe right before </body>. I had the same issue with many menu and sub menus and it always worked perfectly.
Do this:
<div id="dropdown" style="position:absolute; z-index:901;">
//your content
</div>
<div class="vmCartModule" style="position:relative; z-index:900; ">
//your content
</div>
See demo in IE8 : http://jsfiddle.net/WtWqX/8/
I came across this lightbox plugin and thought of implementing it in my project. I have an option of Exporting data in my application. When I click the export link, I want the light box to appear with some text and buttons like Export to excel,export to text file etc.
But will the light box plugin overlay only images? If not, how can I over text and div elements?
This is the export link:
<a class="button" id="export_entries">Export</a>
This is the div element that I want to appear in the lightbox.
<div id="lightboxContent">
<div class="info">
<h2>Export Options</h2>
<div>How would you like that?</div>
</div>
<div class="stuff">
<p class="center">
<a class="button" title="Excel Document" href="#">Excel(.xls)</a>
<a class="button" title="Tab Delimited" href="#">Text(.txt)</a>
</p>
</div>
EDIT 1
I tried another lightbox plugin called facebox, which had an option of loading a html file in the lightbox. But for me,the html file is loaded as a new page. Can anyone help me?
I've given the code below:
<script type="text/javascript" src="/FormBuilder/app/webroot/js/jquery.js"></script>
<script type="text/javascript" src="/FormBuilder/app/webroot/js/facebox/facebox.js"></script>
<link type="text/css" rel="Stylesheet" href="/FormBuilder/app/webroot/css/facebox/facebox.css" media="screen,projection" />
<a class="button" rel="facebox" id="export_entries" href="/lightbox.html" >Export</a>
You can adapt the lightbox to contain any HTML. All it does is blank out the background and put some HTML into a division in the foreground.
You might save some time by checking out Expose, which is part of the jQuery tools:
http://flowplayer.org/tools/demos/index.html
The LightBox plugin is used to overlay only images. So I went for Thickbox plugin which can be used to overlay images,text,html and Ajax content.