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%;
}
}
Related
I am struggling with getting styling correct. I think it is related to hierarchy of styling of the various ionic tags, but I am unsure.
In my app, I am trying to center some <ion-button> tags inside of columns of an <ion-grid>.
The result I keep getting is left-aligned buttons like this:
I have tried a variety of styles and classes to center the buttons. I have tried them at every level of the hierarchy (at the ion-item, grid, row, col, label, buttons, button levels), but I keep getting the same result.
Here is the structure of the item. In this iteration, you can see that I was trying to use the text-center attribute at the level of the row:
<ion-item>
<ion-grid>
<ion-row text-center>
<ion-col size="6">
<ion-label>
<ion-buttons>
<ion-button> Problem? </ion-button>
</ion-buttons>
</ion-label>
</ion-col>
<ion-col size="6">
<ion-label>
<ion-buttons>
<ion-button>More</ion-button>
</ion-buttons>
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
I've read the ionic documentation on the scss styling, but they don't discuss nested items like a grid inside of an ion-item.
I suspect that some element's styling is over-riding my attempt to center the buttons here and I need to understand the basic principle of styling hierarchy. Is there a place to go to learn this?
I've included the entire .scss file for reference, but I suspect I'm missing a principle:
.ios,
.md {
page-home {
#container {
text-align: left;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}
ion-item {
padding-top: 0.5rem;
}
.center-button {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-item: center;
}
ion-col {
text-align: left;
}
ion-label {
font-weight: bold;
}
ion-title {
font-size: 1.5rem;
}
.item-name {
font-size: 2rem;
}
}
}
Thanks!
You can achieve this by adding these two css properties to ion-label
display: flex;
justify-content: center;
This cannot be the right way to solve the problem, but this is what I eventually did: I just put the styling information inline in the HTML. Here's an example:
<ion-row style="width: 100%; text-align: center">
<ion-item style="width: 100%; text-align: center">
<ion-col size="4" style="align-content: center">
<ion-buttons style="width: 100%; text-align: center">
<ion-button
style="width: 100%; text-align: center"
(click)="onClickProblem('button', item.name)"
>
Problem?
</ion-button>
</ion-buttons>
</ion-col>
<ion-col
size="4"
style="width: 100%; text-align: center"
*ngIf="item.notes"
>
<ion-buttons style="width: 100%; text-align: center">
<ion-button
style="width: 100%; text-align: center"
(click)="onClickMore('button', item.notes)"
>More</ion-button
>
</ion-buttons>
</ion-col>
You can see the "width: 100%; text-align: center" throughout. It is not the most maintainable solution, but it got me out of the purgatory of no progress.
I need to build a single page vertically responsive, it needs to be full screen and no scroll.
I've tried doing
ion-content: {
height: 100%;
}
and many other possible solutions but nothing seems to work.
I've found that in small devices like iPhone SE the height of the ion-content is bigger than the screen of the device or the ion-content goes below the ion-tabs.
This is my problem (iPhone SE)
This is how i want it to look like (iPhone X)
Here is the ion-content:
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12">
<p *ngIf="![null, undefined, 'null', 'undefined'].includes(user_type)" class="user-type">{{user_type_text}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ion-icon name="person-circle" class="avatar"></ion-icon>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<p>{{user_name}}</p>
</ion-col>
</ion-row>
<ion-row class="work-status">
<ion-col size="4">
<p class="work-status-label">Pending</p>
<p class="work-status-value" [style.color]="color_theme">{{pending}}</p>
</ion-col>
<ion-col size="4">
<p class="work-status-label">In Progress</p>
<p class="work-status-value" [style.color]="color_theme">{{progress}}</p>
</ion-col>
<ion-col size="4">
<p class="work-status-label">Completed</p>
<p class="work-status-value" [style.color]="color_theme">{{completed}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6">
<ion-card (click)="profile()">
<ion-icon name="person-circle" class="btn-icon" [style.color]="color_theme"></ion-icon>
<p class="btn-text">My Profile</p>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card (click)="notifications()">
<ion-icon name="notifications" class="btn-icon" [style.color]="color_theme"></ion-icon>
<p class="btn-text">Notifications</p>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6">
<ion-card (click)="requests()">
<ion-icon [name]="request_button_icon" class="btn-icon" [style.color]="color_theme"></ion-icon>
<p class="btn-text">{{request_button_text}}</p>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card (click)="explore()">
<ion-icon name="search" class="btn-icon" [style.color]="color_theme"></ion-icon>
<p class="btn-text">{{explore_button_text}}</p>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Here is the scss:
ion-grid {
height: 100%;
}
ion-content {
height: 100%;
}
p {
text-align: center;
}
.user-type {
margin: 0;
}
.avatar {
font-size: 500%;
display: block;
margin-left: auto;
margin-right: auto;
}
.work-status{
-webkit-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
}
.work-status-value {
margin-bottom: 0;
margin-top: 0;
font-size: 250%;
}
.work-status-label {
margin-bottom: 0;
margin-top: 0;
}
.btn-text {
font-size: 150%;
margin-top: 0;
margin-left: 2%;
margin-right: 2%;
}
.btn-icon {
font-size: 300%;
}
Add this in your CSS:
ion-card{
margin-bottom: 10px;
margin-top: 10px;
}
<ion-content [scrollY]="false" class="flex-card">
I still had to fiddle a little more to make it work correctly. This definitely put me on the right track. (flex-card is mine that makes the middle bit work the way I want it to...)
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 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.
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