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
Related
I need to center my image in ion-card. I am using width to small the image so thats why its causing problem to center image.
My html code.
<ion-content>
<ion-card class="no-shadow">
<ion-grid class="ion-no-padding">
<ion-row class="ion-align-items-center ion-justify-content-center" >
<ion-col size="6" >
<ion-card class="card-img">
<img src="../../assets/imgs/cat-icon.png" >
<div><h4>Programming</h4></div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-content>
.scss
ion-content{
--ion-background-color: #202849 !important;
}
.no-shadow{
box-shadow: none !important;
}
ion-row{
ion-card{
text-align:center;
width:100% !important;
margin: 0 !important; // I also dont think important is neccesary
img{
width:90px;
border-radius: 50px;
}
}
}
Its showing image on left side. I need to show in center here is the image of output
<ion-card>
<div style="display: flex; align-items: center;justify-content: center;">
<img alt="image" src="assets/logo.png" />
</div>
</ion-card>
I think this will solve your problem
HTML code:
<ion-content>
<ion-card class="no-shadow">
<ion-grid class="ion-no-padding">
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="6">
<ion-card class="card-img">
<img src="assets/shapes.svg">
<div>
<h4>Programming</h4>
</div>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card class="card-img">
<img src="assets/shapes.svg">
<div>
<h5>Programming</h5>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-content>
SCSS:
ion-content {
--ion-background-color: #202849 !important;
}
.no-shadow {
box-shadow: none !important;
}
ion-row {
ion-card {
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
margin: 0px;
img {
width: 90px;
border-radius: 50px;
}
}
}
and !important is not required as you changing in page level without important it will work.
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)
I am tring to show my grid centered on screen but it showing on right side
Here is my code
<ion-content class="ion-padding">
<h3 style="margin-left: 15px;margin-top: 30px;">Home</h3>
<div>
<ion-grid style="height: 100%">
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="6" *ngFor="let x of data">
<ion-card class="card-img" (click)="detail()">
<img src="../../assets/img/demo.jpg" style="height: 180px; width: 150px;">
<div style="text-align: center;" class="boxe">
<ion-icon name="checkmark" class="tick" color="medium"></ion-icon>
<ion-icon name="close" class="cross" color="dark"></ion-icon>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
.scss
.card-img{
border-radius: 10px;
width: 150px;
}
.tick{
text-align:center;
font-size: 30px;
}
.cross{
text-align:center;
font-size: 30px;
}
As in image in need to centered the grid and remove top spaces between images
Try This : -
page.scss
.card-img{
border-radius: 10px;
img{
width: 100%;
}
}
it's work perfect when slides first index to last but when auto loop go to last index to first index click property is not working.
<ion-slides *ngIf="slides != null" autoplay="3000" loop="true" speed="800" >
<ion-slide *ngFor="let slide of slides" >
<img [src]="slide.BannerImage">
<div class="con-box">
<h2>{{slide.BannerName}}</h2>
<br/>
<button ion-button color="btn" (click)="fnGotoNewArrivalList(slide.CollectionID,slide.BannerName)">Order Now</button>
</div>
</ion-slide>
</ion-slides>
#jatin devani please try this code..
replace ion-slides in place use swiper
html
<!-- Swiper -->
<swiper class="swiper-container" [config]="config" #usefulSwiper>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</swiper>
index.html
<script src="assets/js/swiper.jquery.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
.ts file
config:any;
this.config = {
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
initialSlide : 0,
slidesPerView: 1,
// paginationType: 'progress',
// pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
};
css file
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
I'm trying to vertically align my text on my screen. I've read through the docs on how to do this. But I'm still not having any luck. This is my code:
<div class="row">
<div class="col col-center text-center">
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</div>
HTML
<div class="row">
<div class="col">
<div class="text-center">
<h5 style="text-align: center;">This text is in the center of the screen</h5>
</div>
</div>
</div>
This works on Ionic Framework 3.0.1:
HTML:
<ion-content padding>
<div>
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</ion-content>
SASS:
ion-content {
div {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
Try this solution:
1.Add new css styles:
.home .scroll-content {
display: table !important;
width: 100% !important;
height: 100% !important;
margin-top: -50px; /* the height of the centered content */
text-align: center;
}
.home .scroll {
display: table-cell;
vertical-align: middle;
}
2.Apply home class to ion-view:
<ion-view class="home">
demo
How about specify the "height"?
Anyway, centralize your text in horizontal, you can also use align="center".
(To make it clear, I added the color to row and col.)
<div class="row" style="height: 900px; background-color: blue;">
<div class="col col-center" style="background-color: red;>
<h4 class="gray" align="center">This text is in the center of the screen</h4>
</div>
</div>