I want to blur the whole background except the progress bar in vuetify I searched a lot for the solution but did not find any of it.
Question: make the whole background dull except for the progress bar
here is how my html layout is
<div class="resume-wrapper">
<v-container fluid>
...
</v-container>
<div class="prg-wrapper">
<span style="display: inline-block; margin-bottom: 17px;">Downloading...</span>
<v-progress-linear
color="deep-purple accent-4"
indeterminate
rounded
height="6"
></v-progress-linear>
</div>
</div>
My css is something like this
.prg-wrapper{
position: fixed;
left: 50%;
top: 29%;
transform: translate(-50%, -50%);
}
I'm using vuetify-2.6.x here is documentation for progress-bar https://vuetifyjs.com/en/components/progress-linear/#file-loader
Please help me thanks in advance!!
You should probably use something like this
<v-overlay :value="spinnerVisible" z-index="998">
<v-progress-circular indeterminate size="64" />
</v-overlay>
Otherwise, you can blur the background with a backdrop filter:
<div class="overlay">
<v-progress-linear
color="deep-purple accent-4"
indeterminate
rounded
height="6"
/>
</div>
<style>
.overlay
{
background-color: rgba(145, 150, 158, 0.6);
backdrop-filter: blur(2px);
}
</style>
I have two divs that i transition between using transition-group, which works as it should - however, the content below the divs transitioning, is "jumping" depending on the height of the divs.
What I want it that jumping being prevented, and instead it animates somehow, so I get a nice smooth transition when switching between elements without it "pushing" down to content with a "jump"..
Hope it makes sense :)
I've setup an example on codesandbox here: https://codesandbox.io/s/reverent-stallman-8ixhp?file=/src/components/HelloWorld.vue
The template looks like:
<div class="hello">
<button #click="groupShowOne">Show first {{ gShowFirst }}</button>
<button #click="groupShowTwo">Show second {{ gShowSecond }}</button>
<transition-group name="fade-group" tag="div" mode="out-in" appear>
<div
class="group-element"
v-if="gShowFirst"
style="background-color: yellow"
>
<h3>This is a headline</h3>
<p>This is a text</p>
</div>
<div
class="group-element"
v-if="gShowSecond"
style="background-color: red"
>
<h3>
This is a headline <br />This is a headline <br />This is a headline
This is a headline This is a headline This is a headline
</h3>
<p>
This is a text This is a text This is a text This is a text This is a
text v This is a text v <br />This is a text This is a text This is a
text This is a text This is a text v This is a text v <br />This is a
text This is a text This is a text This is a text This is a text v
This is a text v
</p>
</div>
</transition-group>
<div style="background-color: blue; min-height: 500px; color: #FFF">
Prevent this div from jumping<br />
</div>
</div>
The animation looks:
<style scoped>
.group-element {
width: 100%;
min-height: 100px;
max-height: 20000px;
transition: all 0.5s;
}
.fade-group-enter,
.fade-group-leave-to {
opacity: 1;
}
.fade-group-leave-active {
opacity: 0;
position: absolute;
}
</style>
Try this
Setting the transition property in the passive div:
.ele {
background-color: blue;
min-height: 500px;
color: #fff;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
Let it do some animation
eleStyle() {
return {
transform: this.gShowSecond ? "translate3d(0, 100px, 0)" : "none",
};
},
The div:
<div class="ele" :style="eleStyle">Prevent this div from jumping<br /></div>
What you can try:
Vue has a *-move class for group transitions. However, the transition-group has to be applied to all the elements including the one that has the v-move class, to work.
Here's the article link if you need it for more details: https://vuejs.org/guide/built-ins/transition-group.html#move-transitions
(*-move basically animates items from their original position to their new position, making it smooth, rather than jumpy)
You could still work with what you have and dynamically bind a separate CSS transition for the blue box when showSecond or showFirst equate to a certain value.
I am creating a landpaging and I am facing some style difficulties due to lack of practice.
I want to modify the backgroud of the navbar, so I wanted to make the background transparent so that the bottom of the page appears. How can I do this?
enter image description here
<template>
<div class="Shellhub-LP-1280">
<div class="textura Nuvem">
<b-navbar>
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }" transparent="true">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
<!-- <img src="#/static/logo-inverted.png"> -->
</b-navbar-item>
</template>
...
</b-navbar>
</div>
</div>
</template>
<style>
.Shellhub-LP-1280 {
/* width: 100%; */
height: 2283px;
background-color: #333640;
}
.textura {
/* width: 100%; */
height: 771px;
}
.Nuvem {
width: 100%;
height: 755px;
object-fit: contain;
opacity: 0.9;
float: right;
background: url('../static/nuvem.png');
background-repeat: no-repeat;
background-position: right;
}
Thanks
buefy navbar API:
https://buefy.org/documentation/navbar/#api-view
Passing this props:
<b-navbar :fixed-top="true" :transparent="true" >
Vue docs - components props (recommend to read):
https://v2.vuejs.org/v2/guide/components-props.html
transparent "bug":
Open github issue:
BUG: navbar is-transparent not working .
IMPORTANT: transparent affect navbar items (Not the navbar wrapper himself).
Remove any hover or active background from the navbar items
So add simple CSS styling:
nav.navbar.is-fixed-top {
background: transparent;
}
body top padding issue
I won't find a way to remove body top padding. I added this style:
body{
padding-top: 0px!important;
}
Basic example:
const app = new Vue()
app.$mount('#app')
img.responsive_img{
width: 100%;
height: auto;
}
body{
padding-top: 0px!important;
}
/* change navbar background color */
nav.navbar.is-fixed-top {
background: transparent;
}
<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet"/>
<div id="app">
<b-navbar class="is-link" :fixed-top="true" :transparent="true">
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img
src="https://raw.githubusercontent.com/buefy/buefy/dev/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
>
</b-navbar-item>
</template>
<template slot="start">
<b-navbar-item href="#">
Home
</b-navbar-item>
<b-navbar-item href="#">
Documentation
</b-navbar-item>
<b-navbar-dropdown label="Info">
<b-navbar-item href="#">
About
</b-navbar-item>
<b-navbar-item href="#">
Contact
</b-navbar-item>
</b-navbar-dropdown>
</template>
<template slot="end">
<b-navbar-item tag="div">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</b-navbar-item>
</template>
</b-navbar>
<header style="min-height: 200vh;">
<img class="responsive_img" src="https://picsum.photos/2000/600"/>
</header>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
Change navbar background color on scroll
only by custom code
See this codepen (I added a class on scroll):
https://codepen.io/ezra_siton/pen/jOPZgmR
Change the background color on scroll her:
nav.navbar.is-fixed-top.isActive{
transition: background-color 0.5s ease;
background: red; /* change color on scroll */
}
Change navbar links color to white (For dark hero) - add "is-link" modifier:
https://bulma.io/documentation/components/navbar/#colors
<b-navbar class="is-link" :fixed-top="true" :transparent="true" >
Remove hover/active
:transparent="true"
Remove any hover or active background from the navbar items.
I have a div which is defined as below:
<div class="Le8nfe" aria-hidden="true">
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 1440 810"
preserveAspectRatio="xMinYMin slice"
aria-hidden="true" height="100%" width="100%">
<!-- SOme path definition providing different background format -->
</svg>
</div>
The above div has the following CSS definition for its class:
.Le8nfe {
background: #fff;
bottom: 0;
direction: ltr;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: -1;
}
This is creating a background with a pattern. Then I have a button which is there in one of the div which is a sibling to the above div as shown below:
<div role="button" class="U26fgb O0WRkf zZhnYe C0oVfc sDzdve qxailb"
aria-disabled="false" tabindex="0">
<div class="Vwe4Vb MbhUzd" jsname="ksKsZd"></div>
<div class="ZFr60d CeoRYc"></div>
<content class="CwaK9">
<span class="RveJvd snByac">Yes</span>
</content>
</div>
The problem I am facing is that using Selenium I am not able to click on the button. It says that the element is not visible.
Any idea on how to click on such elements which are shadowed by another div with higher z-index
I use Ionic 3, below the code cannot align the title to center, it moves a little bit right due to the ion-buttons. How can it be solved?
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button (click)="close()">
<ion-icon name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title text-center>{{bookName}}</ion-title>
</ion-toolbar>
</ion-header>
just add mode=ios at title like this
<ion-title mode=ios>Your Title</ion-title>
Tested in ionic 3, 4 and 5 both
You could try to wrap your title in a div like this:
<div text-center>
<ion-title>YOUR TITLE</ion-title>
</div>
This is not ionic v3, the components that you are using are ionic v4, anyway, you can try it this way:
<ion-header>
<ion-toolbar color="primary" text-center>
<ion-buttons slot="start">
<ion-button (click)="close()"><ion-icon name="arrow-back"></ion-icon></ion-button>
</ion-buttons>
<ion-title>{{bookName}}</ion-title>
</ion-toolbar>
</ion-header>
An easy way is to do it with css you can put this class
page-name {
ion-title {
position: “relative”;
left: 5px —- here what you desire
}
}
Use class ion-text-center like below:
<IonTitle class="ion-text-center">Game</IonTitle>
For Ionic 4:
In your ion-title component,
Add class="ion-text-center" to center-align it. This will also produce the problematic offset to the right, due to button.
Add style="margin-left: -52px;" (calculate the problematic offset you want to equalize, in my case it was 52px).
.
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title class="ion-text-center" style="margin-left: -52px;">
My App
</ion-title>
</ion-toolbar>
Set text align center and indent it by -45px to adjust back button space
.header .toolbar-title{
text-align: center;
text-indent: -45px;
}
Try this align="center"
<ion-header>
<ion-toolbar>
<ion-title align="center">Register</ion-title>
</ion-toolbar>
</ion-header>
Instead of tweaking styles and element attributes, you can simply set the ionic config to set the title centered across all platforms.
IonicModule.forRoot(MyApp, {
backButtonText: 'Back',
backButtonIcon: 'ios-arrow-back',
mode: 'ios', // THIS CONFIG CENTERS THE TITLE ACROSS ALL PLATFORMS
iconMode: 'md',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabsPlacement: 'bottom',
pageTransition: 'ios-transition',
swipeBackEnabled: true
}),
The below solution worked for me. Even if there is a button on one side, it will still work.
ion-title {
text-align: center;
padding: 0 78px 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Accepted answer doesn't align title on center position in perfect manner. I have added custom CSS to achieve this.
Ex.
<ion-header>
<ion-toolbar color="primary">
<ion-title class="header-title">Payment Detail</ion-title>
<ion-buttons slot="secondary">
<ion-button>
<ion-icon name="log-out" class="logout-icon" (click)="logout()"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
.header-title {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0 150px;
text-align: center;
}
for ionic 5x this seems to work
<div style="margin-left: auto;margin-right: auto;" classs="ion-text-center">
<ion-title>Testimonials</ion-title>
</div>