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
Related
I am developing an app using Ionic 3. I have an ion-item-sliding wrapped within an ion-list. I need to show the options when the list item is swiped. I got the color working but the text is not displaying at all. I don't have any css applied to the button at all.
<ion-list text-wrap>
<ion-list-header>
...
</ion-list-header>
<ion-item *ngIf="classes?.length === 0">No Data</ion-item>
<ion-item-group *ngFor="let classObj of classes">
<ion-item-divider>...</ion-item-divider>
<ion-item-sliding *ngFor="let class of classObj?.classes">
<ion-item *ngFor="let class of classObj?.classes">
<ion-grid>
...
</ion-grid>
</ion-item>
<ion-item-options side="right">
<button ion-button color="secondary">
Change
</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
I have no idea what went wrong. This happened to both Android and iOS
Its ok I have found the solution. I mistakenly *ngFor both ion-item-sliding and ion-item hence the slider breaks. I removed *ngFor in the ion-item and everything is works fine now
I think you have to provide small cancel button next to your ion-select, which appears only when the user has already selected something:
<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button (click)='removeSelection()'>
<ion-icon name='close'></ion-icon>
</ion-button>
Please, I would appreciate some help. I'm sure is pretty simple but I can't get over the ionic 4 classes that they put behind the elements, and I need an ion-card to be small.
This is my first time on StackOverFlow. Here is my code:
<ion-content color="tertiary" padding margin>
<ion-card color="medium" >
<ion-card-content>
<ion-title>Elija su Zona</ion-title>
<ion-list>
<ion-item *ngFor="let item of zonas">
<ion-label (click)=gotoHomeByZona(id)>{{item.nombre}}</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
<div style="width:80%; margin: 0 auto">
<ion-card color="medium" >
<ion-card-content>
<ion-title>Elija su Zona</ion-title>
<ion-list>
<ion-item *ngFor="let item of zonas">
<ion-label (click)=gotoHomeByZona(id)>{{item.nombre}}</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</div>
I'm getting a problem using ion-slides on Ionic 3.
It's using all my screen size, but when i scroll down there is all my stuft and it is ok, but i need those slides be smaller
This is my code:
<ion-header>
<ion-navbar>
<ion-title>
Productos
</ion-title>
<ion-buttons end>
<button (click)="reloadProducts()" style="background:none" ion-button round full large text-center icon-right> <!--(click)="imeiViewer()"-->
<ion-icon name="cart"></ion-icon>
<ion-badge *ngIf="itemInfoHeader.length > 0" id="cart-badge">{{itemInfoHeader.length}}</ion-badge>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides pager>
<ion-slide style="width:100%; height: 50%; " *ngFor="let slide of slide_items" >
<div>
<img src="assets/img/{{slide}}.png">
</div>
</ion-slide >
</ion-slides>
<ion-grid>
<ion-row>
<ion-col col-6>
<button ion-button block icon-start>Filtrar
<ion-icon name="options"></ion-icon>
</button>
</ion-col>
<ion-col col-6>
<button ion-button block icon-end>Ordenar
<ion-icon name="reorder"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
<ion-col col-6 col-md-4 col-xl-3 *ngFor="let producto of itemInfo">
<ion-item class="item-thumbnail-left" >
<ion-grid>
<ion-row>
<ion-col col-6>
<img src="http://186.176.206.154:8088/images/Products/{{producto.ItemId}}_l_.PNG" >
</ion-col>
<ion-col col-6>
<h3>{{producto.ItemId}}</h3>
<ion-item class="item item-text-wrap">{{producto.ItemName}}</ion-item>
<p style="position:absolute;right:10px;">
<button ion-button (click)="addToCart(producto)" icon-end >
<ion-icon name="cart"></ion-icon>
</button>
</p>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-col>
</ion-content>
if anyone knows how to make my slides "circles" goes up. I tried reducing Height but it doesn't work.
I am using this as guide -> https://ionicframework.com/docs/components/#slides
Fixed! I had to add style="height: 300px;" on ion-slides.
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>.
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