I have a list of cards that I need to show them in 1 column in small devices and 2 columns in medium device and 3 columns in large devices
based on https://stackoverflow.com/a/36432126/2279488 and https://stackoverflow.com/a/36432126/2279488 I tried below codes but no success at the end.
1.
<ion-row responsive-sm>
<ion-col *ngFor="let card of cards" width-50>
<ion-card >
on small device it shows correctly, on large and medium it shows 2 cards only
2.
<ion-row responsive-sm>
<ion-col width-50>
<ion-card *ngFor="let card of cards">
on small device it shows correctly, on large and medium 1 column is shown and all cards are in the column
3.
<ion-row responsive-sm>
<ion-col>
<ion-card *ngFor="let card of cards">
on small device it shows correctly, on medium and large it shows only 1 column and cards are shown in that column
I found the solution, in case other people having same issue
I added wrap to my first code and it works.
<ion-row responsive-sm wrap>
<ion-col *ngFor="let card of cards" width-50>
<ion-card >
I added in my HTML below code and it working for me.
<ion-row class="categoryView">
<ion-col class="gridCol" width-40></ion-col>
<ion-col class="gridCol" width-40></ion-col>
</ion-row>
ion-col.gridCol.col {
height: 80px;
background: azure;
margin: 10px;
}
ion-row.categoryView.row {
height: 100px;
background: black;
}
Related
I need to make the end slot of my list item take up less width so I can make the name in the first slot longer.
Currently it takes up around 50% of the width and is wasting space.
<ion-list *ngIf="!isLoading">
<ion-item *ngFor="let trail of trails" #defectReport (click)="onViewTrailDetails(trail)">
<fa-icon class="icon icon-center status-open-icon" *ngIf="trail.status === trailStatus.Open" slot="start" [icon]="['fas', 'check-circle']" size="2x"></fa-icon>
<fa-icon class="icon icon-center status-closed-icon" *ngIf="trail.status === trailStatus.Closed" slot="start" [icon]="['fas', 'times-circle']" size="2x"></fa-icon>
<fa-icon class="icon icon-center status-new-icon" *ngIf="trail.status === trailStatus.New" slot="start" [icon]="['fas', 'burn']" size="2x"></fa-icon>
<fa-icon class="icon icon-center status-under-construction-icon" *ngIf="trail.status === trailStatus.UnderConstruction" slot="start" [icon]="['fas', 'exclamation-triangle']" size="2x"></fa-icon>
<ion-label class="first-item-label">
<span><h2 class="heading">{{trail.name}}</h2></span>
<p class="label-text">{{trail.status}}</p>
</ion-label>
<ion-label slot="end" class="second-item-label">
<p class="sub-heading">{{trail.statusNotes}}</p>
<p class="label-text-small">{{trail.lastUpdated | timeAgo}}</p>
</ion-label>
</ion-item>
</ion-list>
I ended up using ion-note. It caused some formatting issues but resolved my problem.
https://ionicframework.com/docs/api/note
<ion-note slot="end" class="second-item-label" [ngClass]="{'margin-top-auto': !trail.statusNotes}">
<p class="sub-heading">{{trail.statusNotes}}</p>
<p class="label-text-small">{{trail.lastUpdated | timeAgo}}</p>
</ion-note>
ion-item is a flex container and ion-label has the style flex-grow: 1.
What I did is setting the first to flex-grow: 2, resulting in 2/3, 1/3 responsive proportions for labels.
In your case just add this to the CSS:
.first-item-label {
flex-grow: 2;
}
If you want the last label to have a fixed width, do this instead:
.second-item-label {
flex: 0 0 80px;
}
I recommend to use the following. Just change / reset the flex style of the label element, since it's a flex layout.
ion-label[slot='end'] {
flex: unset;
text-align: end;
}
The property text-align: end is optional and has nothing to do with the question. But in my opinion the right slot of an item should be right aligned. Especially input field.
You could use every element you want. But ion-label has some predefined styles which harmonize with the framework. And ion-note changes e.g. the font-size (in md style).
Update: This will be fixed in upcoming Ionic version (maybe Ionic 6). With this change flex: 1 is not longer set on slot="end".
My goal is to achieve this layout for an array of Images:
As you can see, a simple 2 column grid of square images - this is quite easy in a Bootstrap environment where one specifies 2 cols or size 6 each, then simply setting the images' CSS object-fit to cover in order to avoid stretching and setting the height to auto.
Problem is, where I'm trying to achieve this is in Ionic 4 where the img element is a web component and only certain properties are exposed to that can be customized. So far I can get the images displayed in a 2 column fashion but the aspect ratios are off.(Also I HAVE to use the element, so cannot simply use HTML5 img element).
Here is what I have so far:
<ion-grid>
<ion-row>
<ion-col size="6" *ngFor="let image of selectedImageURIs">
<ion-img [src]="image"></ion-img>
</ion-col>
</ion-row>
</ion-grid>
Note: The Ionic Framework has it's own 'Bootstrap' like framework called ion-grid. What I end up with is this:
I know need to get them to be the same in height and with and set the object fit to cover, but how can I do this with an ion-img? I is a web component so the Shadow Dom comes into play. The docs just mention "The component uses Intersection Observer internally". Will that be able to do what I need? I'm new to web components to trying to understand what I'm missing.
Here is a solution that I used for my Ionic 4 app. I used css to accomplish the look you're going for. Your template will look something like this and using ion-img to take advantage of the lazy loading feature.
html
<ion-grid>
<ion-row>
<ion-col *ngFor="let category of categories" size="6">
<button #categoryButton type="button" (click)="selectCategory(categoryButton, category)" class="category-button">
<ion-card padding class="category-card">
<ion-card-content class="category-card-content">
<ion-img *ngIf="!imageNotLoaded; else loadingCategory" src="{{category.icon_image}}" class="category-icon" (ionError)="imageNotLoaded = true"></ion-img>
<ng-template #loadingCategory>
<ion-skeleton-text animated style="height: 70px;width: 70px"></ion-skeleton-text>
</ng-template>
</ion-card-content>
<ion-card-title class="category-title">{{category.name}}</ion-card-title>
</ion-card>
</button>
</ion-col>
</ion-row>
</ion-grid>
Set up your sass code like this.
scss
ion-col {
text-align: center;
}
.active {
.category-card {
border-color: var(--ion-color-primary)!important;
box-shadow: 0 4px 16px var(--ion-color-primary)!important;
}
}
.category-button {
padding: 4px;
background: transparent;
.category-card {
min-width: 100%;
margin: 0;
border: 2px solid;
.category-card-content {
text-align: center;
.category-icon {
width: available;
}
}
.category-title {
font-size: x-small;
font-weight: bolder;
}
}
}
This then yields the final result as this picture below.
Note: this is all component level code other wise you'll need to use ::ng-deep to get around the shadow dom for your css code.
page.html
<ion-row class="row-card">
<ion-col size="6" class="col-card">
<ion-card class="card-service">
<img src="../../assets/images/services/w-medical.png" class="img-service" />
</ion-card>
</ion-col>
<ion-col size="6" class="col-card">
<ion-card class="card-service">
<img src="../../assets/images/services/w-professional.png" class="img-service" />
</ion-card>
</ion-col>
</ion-row>
page.css
.row-card{
padding: 0px 5px 0px 5px;
.col-card{
padding: 0px;
.card-service{
margin: 5px;
height: 160px;
border-radius: 0px;
padding: 8px;
box-shadow: 0px 0px;
.img-service{
height: 100%;
width: 100%;
object-fit: cover;
margin: 0 auto;
border: 0 solid #024f9a;
background: linear-gradient(#0486ca,#024f9a);
border-radius: 50%;
padding: 15px;
font-weight: bold;
}
}
}
}
Here is working one
ion-grid >
<ion-row>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let image of [1,2,3,4,5,6,7,8,9,10,11]">
<img src=''/>
<!-- <div class="image-container" [style.background-image]="'url(assets/img/' + image + '.jpg)'"></div> -->
</ion-col>
</ion-row>
</ion-grid>
I'm writing an Ionic 2 app and want to use the Slider component (based on Swiper) to do something similar to this demo: http://idangero.us/swiper/demos/28-parallax.html
But whenever I add a parallax item it moves based on the total slider progress (like the background in the demo) and I found no way to have them move based on a single slide progress (like the text in the demo). (Swiper docs)
Does anyone know if that's possible? The Ionic docs don't have any details on parallax in slides.
What I tried:
<ion-slides parallax progress>
<ion-slide>
<h2>No Parallax</h2>
<p data-swiper-parallax="-100">Parallax: -100</p>
<p data-swiper-parallax="-200">Parallax: -200</p>
</ion-slide>
<ion-slide>
<h2>No Parallax</h2>
<p data-swiper-parallax="-100">Parallax: -100</p>
<p data-swiper-parallax="-200">Parallax: -200</p>
</ion-slide>
<ion-slide>
<h2>No Parallax</h2>
<p data-swiper-parallax="-100">Parallax: -100</p>
<p data-swiper-parallax="-200">Parallax: -200</p>
</ion-slide>
</ion-slides>
Demo: http://plnkr.co/edit/k0b92hqkdeUR57t71RR4?p=preview
You can achieve this by putting your background image to be parallaxed in the first slide, like this:
<ion-slides parallax pager>
<ion-slide>
<div class="image-parallax">
<img data-swiper-parallax="2100" src="url.to/image.png"/>
</div>
</ion-slide>
<ion-slide>
<p> Other slide content </p>
<ion-slide>
</ion-slides>
And then, style the div as this:
.image-parallax{
position: absolute;
img{
margin-left: 200px;
width: 2000px;
height: auto;
}
}
And then adjust the margins, width and height of the background.
Hope it helps!
I have managed to solve this with ionic 4, putting the background image in and making the background-attachment local.
my.page.html:
<ion-slides [options]="slideOpts" class="parallax-bg" data-swiper-parallax-x="-20%" [ngStyle]="{'background-image':'url(assets/images/background_'+category+'.svg)'}">
my.page.scss:
.parallax-bg {
background-position: center;
background-attachment: local;
background-repeat: repeat-x;
}
In my <ion-content> element the ionic automatically creates a scroll-content child. How to disable this?
Maybe a pretty ugly workarund would be to add a style rule like
scroll-content {
padding-top: 0px !important;
}
I've checked the documentation, but I can not find how to prevent that <scroll-content> element from being created.
I do had the same problem. Try the following code.
.helllot >.scroll-content {
padding: 0px !important;
}
html
<ion-scroll scrollX="true" style="height:54px;" class="helllot">
<ion-row>
<ion-col width-25>
hello1
</ion-col>
<ion-col width-25>
hello1
</ion-col>
</ion-row>
</ion-scroll>
I'm trying to align text in Html but it doesn't work and I do not know why. I'm using Ionic Framework.
My code is:
<ion-list>
<ion-item>
<b>Name</b> <p align="right"> {{paciente.name}}</p>
</ion-item>
....
</ion-list>
and it looks like this:
but I want all text int the same line, and I do not know how to get that.
See this demo: http://play.ionic.io/app/b477ea2f5623
In ionic items, if you write any text within span with item-note class then it will be aligned to right.This is built in class by ionic, your code will be like this :
<ion-item>
<b>Name</b> <span class="item-note"> {{paciente.name}}</span>
</ion-item>
See more tricks with ionic items provide by built in classes, see this Documentation
Add a css class as
.item {
position: absolute;
right: 0px;
width: 300px;
padding: 10px;
}
The p tag creates a paragraph on a new line, so you need an other element. You could use a span element which is floated right:
Html:
<ion-list>
<ion-item>
<b>Name</b> <span class="right"> {{paciente.name}}</span>
</ion-item>
....
</ion-list>
Css:
.right {
float: right;
}
Apply the ckass to all items you want to be on the right.