I'm using ngx-loading and working very well.
any.component.html
<div class="my-container">
<ngx-loading [show]="loading" [config]="{
backdropBorderRadius: '14px',
backdropBackgroundColour: 'rgba(0,0,0,0.87)',
fullScreenBackdrop: 'true'
}">
</ngx-loading>
</div>
I wanna know if is possible add labels in black screen. Something like image below:
You can do this quite easily just by setting the z-index on the label, that way it will show in front of the black screen.
.text {
z-index: 2000;
position: absolute;
color: white;
left: 0;
right: 0;
text-align: center;
top: calc(50% + 40px);
}
<div class="my-container">
<ngx-loading [show]="true" [config]="{
backdropBorderRadius: '14px',
backdropBackgroundColour: 'rgba(0,0,0,0.87)',
fullScreenBackdrop: 'true'
}">
</ngx-loading>
<span class="text">Here is some text</span>
</div>
Here is a StackBlitz demo: https://stackblitz.com/edit/angular-7wwp3m?file=src%2Fapp%2Fapp.component.html
I don't think this component support text from their documentation. What you could do is
<div class="spinner" *ngIf="spinnning">add some text</div>
The show/hide is controlled by spinning, or a variable passed from your spinner service.
The style of the spinner is controlled by class spinner. You can find tons of implementation of the spinner on the internet. Ex. https://www.w3schools.com/howto/howto_css_loader.asp
Related
Is it possible to use normal CSS animations in angular?
I am trying just to show a div with a simple animation (the div is hide, then appears)
<div class="burguer-icon" (click)="onClick()">
<i class="fas fa-bars"></i>
</div>
<div
[ngClass]="showMenu ? 'shown' : 'hide'"
class="menu-content"
>
<div class="cross-icon" (click)="onClose()">
<i class="fas fa-times"></i>
</div>
// content
</div>
and I toggle the state, if clicked or not, in my component.ts
onClick() {
this.showMenu = !this.showMenu;
}
onClose() {
this.showMenu = !this.showMenu;
}
my css file for this component looks like this:
.burguer-icon {
background-color: orange;
}
.menu-content {
position: absolute;
top: 0px;
width: 100vw;
height: 100vh;
background-color: green;
transition: all 3s ease;
}
.show {
left: 0px;
}
.hide {
left: 90vw;
}
Why this simple animation does not work?
With angular, are you forced to use its animation strategy?
https://angular.io/guide/animations
Thanks in advance
Yes, you can use normal CSS animations. It's working fine on my end. Issue seems to be a typo in your class name show in css and shown in component html.
Update your html like:
[ngClass]="showMenu ? 'show' : 'hide'"
I am trying to put the logout button at the left toolbar , i have done it by position but it is not reponsive nd by smalling the chrome this button disappers , i have tried margin also but of no use!! How can I do it ??
My HTML
<div class="user-button-container at-xl-12 "#userButton>
<button class="user-button " md-button [mdMenuTriggerFor]="menu">
<div fxLayout="row" fxLayoutAlign="start center">
<at-icon class="at-display-block"backgroundColor="purple" backgroundType="border"size="40px" fontSize="30px"></at-icon>
<span class="name" fxHide="true" fxHide.gt-sm="false"></span>
<md-icon></md-icon>
</div>
</button>
</div>
My CSS
.user-button-container {
height: 100%;
font-weight: 400;
.user-button {
height: 100%;
border-radius: 0;
position: relative;
left: 1050px;
md-icon {
font-size: 16px;
width: 16px;
height: 16px;
}
.name {
margin: 0 8px 0 10px;
}
} }
looks like you have the design specified for xl-format, but not for smaller formats. as far as I know you should always start from small (xs) to large (lg) and not the other way around. so maybe just changing the following could help:
div class="user-button-container at-xs-12 "#userButton>
instead of
div class="user-button-container at-xl-12 "#userButton>
if you are using bootstrap use following class for desktop or mobile
<div class="user-button-container col-md-12 col-xs-12">
</div>
also, it appears you are not closing your css items - make sure you are using {}
I'm using Ionic 3 to make a website which will be part of another native app in a webview so I don't user cordova or any native plugins.
I have a form with an embedded Google Map View above the elements and here is my HTML :
<div style="height: 40%; width: 100%">
<div id="map_loader" *ngIf="showMapLoader">
<div class="sk-wave">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
</div>
<div #mapCanvas style="width: 100%; height: 100%;"></div>
</div>
<form (ngSubmit)="submit()" padding>
<ion-list>
......
......
.....
</ion-list>
</form>
and here is my CSS :
#map_loader {
margin:auto;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 1000;
position: absolute;
}
.scroll-content {
top: 38%;
position: absolute;
margin-top: 32px;
}
Now once the user open the website on his phone and start filling the form the keyboard shifts the map out of the screen ( Up ) and it stays that way and a blank empty space shows bellow the form.
Am I doing it right? Is that happening because of my CSS? and what is the best way to make a div takes a specific percentage of the screen height? I tried ion-grid but it seems that it can't help me for this case.
it's bug in ionic, once you focus on any input the keyboard will show up and will add padding-bottom for the scroll-content class to lift the for above the keyboard and it doesn't remove the padding-bottom after you close the keyboard.
I tried to check if I have any JS event on the mobile keyboard but we don't so my work around is to set a fixed padding-bottom for the scroll-content class to prevent changing it on the runtime.
.scroll-content {
padding-bottom: 0 !important;
}
Change in the AndroidManifest.xml file did the trick for me. android:windowSoftInputMode="adjustPan"
Yes, You can avoid this issue by using Ionic grid.You need to set CSS as shown below.
your-page.scss
ion-grid {
min-height: 100%;
}
I am trying to modify the z-index of the http://tympanus.net/Development/ScatteredPolaroidsGallery/ . The demo I am refering to is in the third / final example shown.
When the polaroid is flipped I am unable to select the text in chrome or Safari, but I can in firefox.
Chrome and Firefox
I just need a way to be able to select the text in chrome/safari. This way I can then be able to add hyperlinks and call to action buttons that are currently hidden behind the z-index.
The div in question is 'photostack-back'
HTML
<section id="photostack-1" class="photostack photostack-start">
<div>
<!-- Polaroid with backside -->
<figure>
<a href="http://goo.gl/fhwlSP" class="photostack-img">
<img src="img/2.jpg" alt="img02"/>
</a>
<figcaption>
<h2 class="photostack-title">Happy Days</h2>
<!-- optional backside -->
<div class="photostack-back">
<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
</div>
</figcaption>
</figure>
</div>
</section
CSS
.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
}
Here is the tutorial Scattered Polaroids Gallery
I figured out that this was not a z-index issue but a backface-visibility issue.
I used veinjs to inject the following code in photostack.js
vein.inject('figure', {'backface-visibility' : 'visible !important'});
and the css
figcaption {
backface-visibility: hidden;
}
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.