I have the following slides of images:
<ion-slides style="margin-top: 30px; margin-bottom: 30px" pager="true" [options]="slideOpts">
<ion-slide *ngFor="let image of imageURLs">
<div (click)="openZoomedImage(image.fullURL)">
<img [src]="image.fullURL" alt=”slide-1”/>
</div>
<ion-button size="small" color="danger" (click)="deleteImage(image.imageName)">Delete</ion-button>
</ion-slide>
</ion-slides>
However I am wondering how I can make the delete button for each image at the bottom of the slides?
Thank You
wrap it inside a div and use css.
.selector{
position: absolute;
bottom: 0;
right: 10px;
}
this css will send your button to right bottom.
Check this stackblitz for demo:
Ion Slides Demo
Related
I am trying to show the button on the bottom of page but the issue is its not showing in bottom just showing on the middle not in end.
Here is my .html code
<ion-header no-border>
<ion-toolbar >
<ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
<img src="assets/icon/favicon.png" height="50px">
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="skip()"><p>SKIP</p></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-slides pager="true" #mySlider>
<!-- Slide 1 -->
<ion-slide>
<div>
<img src="assets/welcome-slides/portrait.png"/>
<h2>
Capture the moment
</h2>
<ion-label color="gray">
Our photographer will capture the shot in the right place.
</ion-label>
</div>
<ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
</ion-slide>
</ion-slides>
</div>
</ion-content>
.scss
.toolbar-background {
border: none;
}
.btn{
width: 90%;
height: 50px;
position : absolute;
bottom : 0;
left: 5%;
}
ion-slide {
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
.bar-header {
background-color: red($color: #000000);
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
}
I try to set height of slide but dont know why its not working seems like button is in the end of slide but the height is less thats why button is showing in middle.
Try placing your button outside of the <ion-slides> component.
<ion-header no-border>
<ion-toolbar >
<ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
<img src="assets/icon/favicon.png" height="50px">
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="skip()"><p>SKIP</p></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-slides pager="true" #mySlider>
<!-- Slide 1 -->
<ion-slide>
<div>
<img src="assets/welcome-slides/portrait.png"/>
<h2>
Capture the moment
</h2>
<ion-label color="gray">
Our photographer will capture the shot in the right place.
</ion-label>
</div>
</ion-slide>
</ion-slides>
<!-- put your button here -->
<ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
<!-- put your button here -->
</div>
</ion-content>
I need to border-radius in ion-menu but when i am doing its applying on shadows of entire page. i need to just do in white menu.
This is how its showing
I need to show like this
My app.component.html
<ion-app>
<ion-menu side="end" contentId="menu-content">
<ion-content >
<div >
<div style="text-align: right;">
<ion-icon name="more" style="font-size: 25px;"></ion-icon>
</div>
<div style="display: flex; justify-content: center;">
<ion-avatar style="text-align: center;">
<img src="../../assets/img/demo.jpg">
</ion-avatar>
</div>
<div style="text-align: center; margin-top: 15px; font-size: 18px;">
Downloads
</div>
<div style="text-align: center; margin-top: 15px; font-size: 18px;">
Sign Out
</div>
<div style="text-align: center; margin-top: 15px; font-size: 18px;">
</div>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-app>
global.scss
ion-menu{
--background: white !important;
--width: 150px;
--height: 170px;
}
When i add border-radius in ion-menu its just change the radius on entire blur page. I need to know hoe can i change the radis of just white box which have width of 150px;
Sergey was right, for these kinds of things you need to use popover - https://ionicframework.com/docs/api/popover.
Using your code I was able to create quickly the UI you needed.
Also, I've put the code on github so you could see what I did there: https://github.com/App-to-date/menu-popover
If help another person, work...
const popover = await this.popoverController.create({
component: MenuComponent,
event: event,
translucent: false
});
// INJECT BORDER-RADIUS
popover.shadowRoot.lastChild.lastChild['style'].cssText = 'border-radius: 20px !important;';
return await popover.present();
HTML:
<ion-menu side="end" contentId="menu-content">
[style]="sanitizer.bypassSecurityTrustStyle(yourStyle)">
TypeScript:
import {DomSanitizer} from "#angular/platform-browser";
yourStyle = "--background: white !important; --width: 150px; --height: 170px;"
constructor(private sanitizer: DomSanitizer)
Here is my html template of my image and header I want to align t text in side that image
<ion-slides *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true">
<ion-slide *ngFor="let item of getData" (click)="openItem(item)">
<img src="{{item.jetpack_featured_media_url}}" class="new-collection"/>
<h4 [innerHTML]="item.title.rendered"></h4>
</ion-slide>
</ion-slides>
You can use ion-card
html
<ion-slides *ngIf="getData.length>0" autoplay="2700" speed="300" class="slideroption" pager="true" loop="true">
<ion-slide *ngFor="let item of getData" (click)="openItem(item)">
<ion-card class="myCard">
<img src="{{item.jetpack_featured_media_url}}" class="new-collection"/>
<div class="myOverlay">
<div class="card-title">{{ item.title.rendered }}</div>
<div class="card-subtitle">{{ some subtitle you like }}</div>
</div>
</ion-card>
</ion-slide>
</ion-slides>
And some styling
css
img{
width:100%;
height:100%;
}
.myCard{
position:relative;
}
.myOverlay{
width: 100%;
height: 40%;
padding-top:5%;
text-align: center;
position: absolute;
z-index: 99;
bottom: 20%;
opacity: 0.5;
color: white;
font-weight: bold;
background-color: black;
}
Working-demo
We are trying to create a login form with rounded inputs. The problem is that after adding border-radius to inputs the login button becomes longer than inputs themselves. Here is the code:
<div class="appForm" ion-fixed padding margin-bottom style="position: absolute !important; top: 0%; bottom: 0%; left: 0; margin-bottom: 1%;">
<div class="logo">
<h2>Chat App</h2>
</div>
<ion-list style="margin-top: 43% !important">
<ion-item style="">
<ion-input class="input-field" [(ngModel)]="email" name="username" type="text" placeholder="Email"></ion-input>
</ion-item>
<ion-item>
<ion-input class="input-field" [(ngModel)]="password" name="password" type="password" placeholder="Password"></ion-input>
</ion-item>
<button ion-button block class="login-button" (click)="LoginUser()">Login</button>
<p class="signin">
<button ion-button block clear (click)="RegisterPage()">Sign Up</button>
</p>
</ion-list>
</div>
Also here are the styles:
ion-item {
background-color:transparent !important
}
.input-field {
border:2px solid;
border-radius: 20px;
color: color($colors, light) !important;
}
.login-button {
text-transform: none;
border-radius: 20px;
background:linear-gradient(to right, #DD2476, #FF512F);
color: color($colors, light);
margin-top:15px !important;
}
...
...
How can we make the login button on the same width as inputs?
As you added your ion-input in ion-item it will add default 16px padding from left.
So either you add your button into <ion-item> like below
<ion-item>
<button ion-button block class="login-button" (click)="LoginUser()">Login</button>
</ion-item>
Or you can override ion-item style and change or remove padding like below
default padding : padding-left: 16px;
ion-item {
background-color:transparent !important;
padding-left: 0px;
}
By doing this you can find your ion-input same like login button.
Hope this will helps!
<ion-content >
<ion-slides loop #Slides>
<ion-slide >
<h2>Slide 1</h2>
</ion-slide>
<ion-slide >
<h2>Slide 2</h2>
</ion-slide>
<ion-slide >
<h2>Slide 3</h2>
</ion-slide>
</ion-slides>
<button ion-button full>login</button>
</ion-content>
When I use the code above, I have to scroll down to see the button.
Is there any way to force all the components to be on the same page ?
Add this to your page SCSS:
.scroll-content {
display: flex;
flex-direction: column;
ion-slides {
display: flex;
}
}