I have problem with ionic grid within slides. I have items of product where i put on ion-grid, and ion-grid is within slides, then if i rotate my android device, ion-grid is not responsive, so the image is cut off
<ion-col class="hide-xs" size-sm="7" >
<ion-slides >
<ion-slide *ngFor="let products of listProduct" >
<app-ajax [ajax]="ajax"></app-ajax>
<ion-grid>
<ion-row>
<ion-col size="6" sizeMd="4" sizeXl="3" *ngFor="let item of products">
<div class="image-container" *ngIf="item.photo!==''">
<ion-img *ngIf="item.idproduct !==0" width="100%" height="100%"
[src]="'data:image/jpeg;base64,' + item.foto64" (click)="presentModal(item)"></ion-img>
</div>
<div class="fontImage" (click)="presentModal(item)">{{item.nmproduct}}</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
</ion-slides>
</ion-col>
if i removed ion-slides, ion-grid responsive properly, so the image is not cut off. how to solve this? thankyou
you can give this in component.ts
#ViewChild('slides',{static: true}) slides;
#HostListener('window:resize')
onResize() {
setTimeout(() => this.slides.update(), 50);
}
Related
Calender view is set in scrollview but today selected date is not automatically set in center of the view.
<ion-row>
<ion-scroll scrollX="true" style="width:100vw; height:80px;overflow: hidden;" >
<ion-row nowrap class="headerChip">
<div *ngFor="let j of days">
<button ion-button [ngClass]="{'':(j.isSelected==false),'todayBg':(j.isToday==true) ,'selectedBg':(j.isSelected==true)}" (click)="clickDate(j)">{{j.day}}<br>{{j.displayDate}}</button>
</div>
</ion-row>
</ion-scroll>
</ion-row>
I want to implement three ion-button's in ion-footer, each algining to left, middle and right respectively.
It seems ion-button's with start and end can do left and right.
How about middle? I have checked the API and ion component, it seems ion-title is by default centered, but there is no out-of-box way to get button in the middle?
In the ion-footer element, try using ion-grid and then remove the padding from the grid.
<ion-footer>
<ion-grid>
<ion-row no-padding no-margin>
<ion-col col-4 no-padding>
<button ion-button full>Button 1</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 2</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 3</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
You can add the float-start and float-end to the first and third button respectively. By making use of float-[start|end] instead of float-[left|right] your buttons will shift position with the app direction
HTML:
<ion-footer>
<div class="btn-wrapper">
<button ion-button float-start>Button1</button>
<button ion-button>Button2</button>
<button ion-button float-end>Button3</button>
</div>
</ion-footer>
CSS:
.btn-wrapper {
text-align: center;
}
EDIT:
Added a wrapping <div> for the buttons and gave it the style text-align: center;, becasue I was experiencing weird animation behavior without the wrapping <div>.
Ionic seems to be adding a <div class='fixed-content'> and <div class='scroll-content'> to my view and it's creating double margins. It seems to just add a lot of content and I'm assuming I can control it, I just don't know how.
Why would that happen?
my html:
<ion-content>
<ion-grid>
<ion-row>
<ion-col >
<ion-card>
<ion-card-content>
<img [src]="client.get_image.before_front_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.before_side_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.after_front_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.after_side_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
rendered content:
<ion-content class="content content-md">
<!-- DOUBLE MARGIN... WHY?! -->
<div class="fixed-content" style="margin-top: 56px; margin-bottom: 61px;"></div>
<div class="scroll-content" style="margin-top: 56px; margin-bottom: 61px;">
<ion-grid class="fill-height grid">
<ion-row class="row">
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="http://awaken180-assets.s3.amazonaws.com/clients/before_fronts/000/000/067/original/marty.jpg?1490189112">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="../assets/newred_newblue_outline.png">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="../assets/newred_newblue_outline.png">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="../assets/newred_newblue_outline.png">
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
Yes, Ionic2 adds both fixed-content and scroll-content.
The fixed-content as the name says it's the content on the page that is fixed, if it's adding both margin to top and bottom it's because you have a header and a footer on this page, and it adds exactly the amount of px it's needed to leave the space for your header and footer on your device. So if you check on a device it may be 36px, on anothe it's 72px. If you want to test, remove the footer or header and check again, it'll not have margin top or bottom.
The scroll-content is where the scrollable content is, in this case, your ion-content. Everything inside ion-content is scrollable and added on scroll-content.
You can force css to it (i use the fixed-content class to add a non-scrollable background image to some projects), but it's not something nice to do because it'll make your content on the page go up, so if you have content right bellow the header it may be initialized behind the header.
So that's why Ionic2 creates these classes, it's just to ensure that your scrollable content goes right where it needs to be.
I've been trying to use ion-cards using ion dark theme, and I can't actually see the text;
I tried to change the CSS with this:
h2,p {
color:white;
}
and it's still black.
I took the code right from ionic documentation:
<ion-card class="col-md-4" *ngFor="let new of news;let i=index">
<ion-item>
<ion-avatar item-left>
<img [src]="new.image_url" *ngIf="new.image_url">
</ion-avatar>
<h2>TEST</h2>
<p>AA TEST</p>
</ion-item>
<ion-card-content>
<p>
TSET SUMMARY
</p>
</ion-card-content>
<ion-row>
<ion-col>
<button ion-button icon-left clear small>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 likes</div>
</button>
</ion-col>
</ion-row>
</ion-card>
Any ideas?
You can overwrite the ionic variable itself. Navigate the ./theme/variables.scss and add
$card-ios-text-color(#fff);
$card-md-text-color(#fff);
$card-wp-text-color(#fff);
All the ionic variables can be found here for quick reference
How I can remove <ion-item> divider? I have the following code to show 4 items in a row:
<ion-row ion-list>
<ion-col width-25 *ngFor="let player of players">
<ion-item color="dark">
<ion-avatar item-left>
<img [src]="photo" class="img img-circle"/>
</ion-avatar>
{{user.name}}
</ion-item>
</ion-col>
</ion-row>
and the output shows 4 images in a row, as excepted, but each image has a white divider below it. I don't want any divider.
I tried to set style="border:none" but it didn't do it.
This is for ionic 2 and 3. Please refer to this answer for higher versions of ionic
use no-lines
<ion-row ion-list>
<ion-col width-25 *ngFor="let player of players">
<ion-item no-lines color="dark"><!-- here -->
<ion-avatar item-left>
<img [src]="photo" class="img img-circle"/>
</ion-avatar>
{{user.name}}
</ion-item>
</ion-col>
</ion-row>
For whatever reason, this didn't work for me.
But having lines="none" worked great.
For ionic v4
<ion-item lines="none">...</ion-item>
Pulled from ionic docs. https://ionicframework.com/docs/api/list
For ionic v4, you should use the lines property:
<ion-row ion-list>
<ion-col width-25 *ngFor="let player of players">
<ion-item lines="none" color="dark">
<ion-avatar item-left>
<img [src]="photo" class="img img-circle"/>
</ion-avatar>
{{user.name}}
</ion-item>
</ion-col>
</ion-row>
Apply this for Ionic V4. Really it will work.. Happy coding
<ion-item lines="none">
</ion-item>
If you want to disable the lines / borders globally on all of your <ion-item>'s, just add the following code to your src/global.scss (default when generating a Ionic v4 App with Angular) of your application.
ion-item {
--border-width: 0;
--inner-border-width: 0;
}
The attribute lines="none" on a <ion-item> does nothing other.
Hope it helps someone.
Cheers
Unkn0wn0x
I tried with no-line but it didn't work in ionic 4
Only this work for me in ionic 4 :
<ion-item lines="none"> </ion-item>
<ion-list>
<ion-item lines="none" button detail *ngFor="let note of notesService.notes">
<ion-label>{{ note.title }}</ion-label>
</ion-item>
</ion-list>
I am on ionic 4, and lines="none" somethimes don't work.
So I use this line.
ion-list:not(.list-lines-none) ion-item::before{
border-width: 0 !important;
}
And this is my ionItem example. (It has hidden error property also)
<IonItem lines="none" detail={false}>
<IonIcon
className="w-40 h-40 float-left"
src="/assets/icon/store-black.svg"
/>
<IonLabel className="flex flex-col ml-10">
<h5 className="text-base font-bold m-0 ">Lorem ipsum </h5>
<span className="text-sm leading-tight">Kratki opis</span>
</IonLabel>
<IonIcon
className=" absolute top-50 right-30 w-15 h-15"
src="/assets/icon/arrow-right.svg"
/>
</IonItem>
use (lines="none") in your ion-item