Reducing the width of ion-select (Ionic v3) - ionic-framework

I want an ion-select and ion-input in same line with width as follows:
ion-select 10% width
ion-input 10% width
I wrote the following code for that (Stackblitz):
<div style="display: flex">
<ion-item style="width:10%">
<ion-label>+2</ion-label>
<ion-select>
<ion-option value="1">+1</ion-option>
<ion-option value="2">+2</ion-option>
<ion-option value="3">+3</ion-option>
</ion-select>
</ion-item>
<ion-item style="width:90%">
<ion-input [value]="23321312321"></ion-input>
</ion-item>
</div>
But unfortunately, upon doing so text of ion-select disappears.
How do I achive this.


You can use width / max-width property to set your ion-item width to 10%. what you need to add is !important as ion-item already have its default style so to overwrite style we need to make our style important.
max-width: 10% !important;
width: 10% !important;
Please check below code:
<div style="display: flex">
<ion-item style="max-width: 14% !important;">
<!-- <ion-label>+2</ion-label> -->
<ion-select style="max-width: 100% !important;">
<ion-option value="1">+1</ion-option>
<ion-option value="2">+2</ion-option>
<ion-option value="3">+3</ion-option>
</ion-select>
</ion-item>
<ion-item style="max-width: 84% !important;">
<ion-input [value]="23321312321"></ion-input>
</ion-item>
</div>
<div>hello</div>
Adjust your Ion-item width as per your requirement.
Hope this will helps.

Related

How to make the ion-card take the remaining height?

Is it possible, I guess through some CSS manipulation, to make the height of the last ion-card equal to the remaining height of the ion-content inside the following Vue2 template?
<template>
<ion-app>
<ion-page>
<ion-content>
<ion-card>
<ion-item button>
<ion-thumbnail slot="start">
<img src="~assets/svg/QR-code.svg" />
</ion-thumbnail>
<ion-label> Generate a new QR Code. </ion-label>
</ion-item>
</ion-card>
<ion-card>
<ion-card-header>
<ion-card-title>Header Test</ion-card-title>
</ion-card-header>
<ion-card-content>Balance €</ion-card-content>
</ion-card>
<ion-card class="last-orders-card">
<ion-card-header>
<ion-card-title>Header 1</ion-card-title>
</ion-card-header>
<ion-list class="last-orders-list">
<ion-item v-for="item in items" :key="item.id">
<ion-label>
<ion-text color="primary">
<h3>Test</h3>
</ion-text>
</ion-label>
</ion-item>
</ion-list>
</ion-card>
</ion-content>
</ion-page>
</ion-app>
</template>
I've added the following css classes in order to make the content inside the card (in this case the ion-list) scrollable.
.last-orders-card {
max-height: 100%;
display: flex;
flex-flow: column;
}
.last-orders-list {
overflow: scroll;
}
I'd like to know if I can fit the height of the card to the remaining space without changing the max-height. I can put it to 50% for instance but that changes depending on the screen size and especially if there are some more cards on top (which is the case but I've omitted them from the snippet for brevity).

ion-select showing three dots

I am using ion-select in my app. But when i run it on the device, ion-select shows three dots in spite of having sufficient space.
My Code is
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item">
<ion-select placeholder="Size" interface="popover">
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
I have already tried using max-width:100% . ion-select works perfectly when i use it in new row. But i want to display it with other item in the same row.
Please help, i have been searching the net for the last 5-6 hours but no help.

Use text-wrap in ion-item or ion-select,it will wrap your select text.
<ion-row *ngIf="item.type=='variable'">
<ion-col>
<div class="addtocart">Add</div>
</ion-col>
<ion-col>
<ion-item class="item" text-wrap>
<ion-select placeholder="Size" interface="popover" text-wrap>
<ion-option *ngFor="let items of item.attributes[0].options">
{{items}}
</ion-option>
</ion-select>
</ion-item>
</ion-col>
</ion-row>
Then if it is not working then give min-width to ion-select in css

How to get an 'ion-card' to be smaller, but still centered in the middle of the screen (ionic 4)

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 cant remove ion-input padding

I try this
<ion-item style="padding:0px !important;" >
or html
<ion-item class="no-padding" >
<ion-input [(ngModel)]="siparis.urun.stok_adi" type="text" ></ion-input>
</ion-item>
scss
.no-padding {
padding: 0px !important;
}
but didnt remove input padding
enter image description here

Remove ion item divider

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