<ion-item lines="none" class="ion-text-center">
<ion-avatar slot="start" *ngFor="let mId of headerMemberIds;let i = index" class="member-{{i}}">
<img [src]="profilePhotoUrl$[mId] | async">
</ion-avatar>
<ion-avatar slot="start" class="avatar" *ngIf="allMemberIds?.length>3">
<div class="remaining-members">+{{allMemberIds?.length-2}}</div>
</ion-avatar>
</ion-item>
Any clue about how to center the content inside the ion-item and of course my use case above?
Generated css on the browser
.ion-text-center, [text-center] {
text-align: center !important;
}
You should use class="text-center" and define the class like that :
.text-center {
text-align: center;
}
Related
Following code works fine in mobile view but source code does not work in web view. screenshot is attaced with question. split pane is not working as per required. same is happening with every component. I have tried many things like host: style{width:70%} but nothing works. Basically it should acquire remaining space of page.
<ion-split-pane class="ion-menu" contentId="mis-menu-content" when="xl">
<ion-menu type="overlay" contentId="mis-menu-content" class="menu-gradient">
<ion-content>
<div *ngFor="let p of appPages">
<ion-list>
<ion-menu-toggle auto-hide="false" *ngIf="p.url">
<ion-item
[routerDirection]="'root'"
[routerLink]="[p.url]"
routerLinkActive="active"
>
<ion-img slot="start" class="imgset" [src]="p.icon"></ion-img>
<ion-label class="menu-font"> {{p.title}} </ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item
button
*ngIf="p.children?.length>0"
(click)="p.open = !p.open"
[class.active-parent]="p.open"
detail="false"
>
<ion-img slot="start" class="imgset" [src]="p.icon"></ion-img>
<ion-icon
class="imgset"
slot="end"
name="chevron-forward-outline"
*ngIf="!p.open"
></ion-icon>
<ion-icon
class="imgset"
slot="end"
name="chevron-down-outline"
*ngIf="p.open"
></ion-icon>
<ion-label class="menu-font">{{p.title}}</ion-label>
</ion-item>
<ion-list class="item-md-list" *ngIf="p.open">
<ion-menu-toggle auto-hide="false" *ngFor="let sub of p.children">
<ion-item
[routerDirection]="'root'"
[routerLink]="[sub.url]"
routerLinkActive="active"
>
<ion-img
slot="start"
class="imgset-sub"
[src]="sub.icon"
></ion-img>
<ion-label class="menu-font-sub"> {{sub.title}} </ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-list>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet id="mis-menu-content" main>
<link href="roboto.css" type="text/html" />
<ion-row>
<ion-col size-lg="12" size-md="12" size-sm="12" size="12">
<ion-title class="welcomelogo"
><img src="../../../assets/img/pil logo.png"
/></ion-title>
<ion-title class="welcometxt">
Welcome <br /><ion-title class="welcometxt1">To</ion-title
><br /><ion-title class="welcometxt2">Operations Portal</ion-title>
</ion-title>
</ion-col>
</ion-row>
</ion-router-outlet>
</ion-split-pane>
}
.split-pane {
position: absolute;
/* top: $SPLIT_TOP; */
}
ion-menu[type="overlay"] {
z-index: 80;
position: fixed;
}
ion-menu[type="reveal"] {
z-index: 80;
}
.menu-item{
background:none;
color:white;
font-weight:300;
border:0px;
.item-content{
background:none;
&.activated{
/* background: $MENU_TRANSPARENCY; */
}
}
&.active-page-highlight{
.item-content{
/* background: $MENU_TRANSPARENCY; */
}
}
}
I am trying to center the avatar to the middle, with the code below but it doesn't work.
I have used this class="ion-align-items-center" that i got from the ionic documents but with no successs.
<ion-grid style ="text-align: center">
<ion-row class="ion-align-items-center" >
<ion-col class="ion-align-items-center" *ngFor="let item of students" >
<!-- <div class= "imageHold" >
<ion-img [src]= "profileImage || item.profileImage"></ion-img>
</div> -->
<ion-avatar class="ion-align-items-center">
<ion-img [src]= "profileImage || item.profileImage"></ion-img>
</ion-avatar>
</ion-col>
</ion-row >
<ion-row style ="text-align: center">
<ion-col>
<ion-button size="small" fill="outline" (click)="chooseProfilePic()" >Choose Profile Photo</ion-button>
</ion-col>
</ion-row>
</ion-grid>
I get this result
add a class in the avatar div.
.avatar{
margin: auto;
}
I'm trying to move my cards to the left to eliminate the space in the left margin.
I can't seem to move the cards closer to the left to eliminate the space in the left margin.
And I'm trying to add the title next to the avatar and the description at the bottom.
<ion-item *ngSwitchDefault>
<ion-card-content style="margin-left: 1px;" class="lists">
<ion-list *ngFor="let topic of groupTopics">
<ion-card style="width: 280px; height: 150px; margin: 1px; margin-left: 2px;" [ngSwitch]="topic.photoUrl">
<ion-avatar *ngSwitchDefault slot="start">
<img [src]="topic.photoUrl" />
</ion-avatar>
<ion-avatar *ngSwitchCase="'false'">
<img src="assets/img/add-an-image.png" />
</ion-avatar>
<ion-label>
<h2>{{topic.title}}</h2>
<p>{{topic.description}}</p>
</ion-label>
</ion-card>
</ion-list>
</ion-card-content>
</ion-item>
I need to structure the radio buttons as shown below.
image 1
I have tried as shown below.
.html
<ion-row>
<ion-col col-6>
<ion-grid radio-group formControlName="location">
<ion-row>
<ion-col col-12>
<ion-item *ngFor="let l of locations;let index = index">
<ion-label class="custom-radio">
<ion-radio value="{{index}}"></ion-radio>
<i class="{{l.icon}}"></i><br/> {{l.description}}
</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col col-6>
//other part
</ion-col>
</ion-row>
Then it looks like below.
Can you tell me how to design it looks like image 1?
If you can post your HTML and CSS, then I'd be happy to help with your actual code. However, in principle, you can do something like this;
HTML
<div class="ion-item">
<i class="l-icon"></i>
<span class="l-description">Text below the image</span>
</div>
CSS
.ion-item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 60px;
}
.l-icon {
width: 50px;
height: 50px;
}
.l-description {
display: block;
}
I'm trying to make a gird of 1-row * 2-col as follow:
<ion-grid>
<ion-row *ngFor="let products of productsArray">
<ion-col center text-center col-6 *ngFor="let product of products">
<ion-card (click)="onProductClick(product)">
<ion-badge *ngIf="product.on_sale" class="badge-onSale" item-right>Sale</ion-badge>
<img src="{{product.featured_src}}" />
<ion-card-content>
<ion-card-title style="font-size: 100%">
{{ product.title | StripHTML }}
</ion-card-title>
</ion-card-content>
<ion-row center text-center>
<p style="color: red">
{{ product.price_html | StripHTML:{split:" ",index:0} }}
</p>
</ion-row>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
but due to the difference of each card->content-height the cards/rows , aren't in equal height , how would I tackle that?
I fixed it , by adding these styles to ion-col
.product-col{
display: flex;
justify-content: center;
}
and now it works as intended!