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).
Related
Im trying to justify content of an ion-item in ionic4. If I set .input-wrapper { justify-content: space-around; } from the browser console I get the desired result but what's the proper way of doing it?
<ion-item class="ion-justify-content-around">
<ion-badge slot="start" class="list-badge">
<ion-icon name="git-network-outline"></ion-icon>
</ion-badge>
<ion-text>Description</ion-text>
<ion-text color="medium">500</ion-text>
</ion-item>
add the content in a div and slot it to center. like this:
<ion-item class="ion-justify-content-around">
<div slot="center" style="width: fit-content">
<ion-badge slot="start" class="list-badge">
<ion-icon name="git-network-outline"></ion-icon>
</ion-badge>
<ion-text>Description</ion-text>
<ion-text color="medium">500</ion-text>
</div>
</ion-item>
Something like this.
I am trying to show the button on the bottom of page but the issue is its not showing in bottom just showing on the middle not in end.
Here is my .html code
<ion-header no-border>
<ion-toolbar >
<ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
<img src="assets/icon/favicon.png" height="50px">
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="skip()"><p>SKIP</p></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-slides pager="true" #mySlider>
<!-- Slide 1 -->
<ion-slide>
<div>
<img src="assets/welcome-slides/portrait.png"/>
<h2>
Capture the moment
</h2>
<ion-label color="gray">
Our photographer will capture the shot in the right place.
</ion-label>
</div>
<ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
</ion-slide>
</ion-slides>
</div>
</ion-content>
.scss
.toolbar-background {
border: none;
}
.btn{
width: 90%;
height: 50px;
position : absolute;
bottom : 0;
left: 5%;
}
ion-slide {
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
.bar-header {
background-color: red($color: #000000);
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
}
I try to set height of slide but dont know why its not working seems like button is in the end of slide but the height is less thats why button is showing in middle.
Try placing your button outside of the <ion-slides> component.
<ion-header no-border>
<ion-toolbar >
<ion-buttons slot="start" style="margin:5px 0px 5px 5px;">
<img src="assets/icon/favicon.png" height="50px">
</ion-buttons>
<ion-buttons slot="end">
<ion-button (click)="skip()"><p>SKIP</p></ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-slides pager="true" #mySlider>
<!-- Slide 1 -->
<ion-slide>
<div>
<img src="assets/welcome-slides/portrait.png"/>
<h2>
Capture the moment
</h2>
<ion-label color="gray">
Our photographer will capture the shot in the right place.
</ion-label>
</div>
</ion-slide>
</ion-slides>
<!-- put your button here -->
<ion-button expand="block" class="btn" (click)="swipeNext()">NEXT</ion-button>
<!-- put your button here -->
</div>
</ion-content>
I have an element which is a header with two buttons. I have the buttons organized in a ion-grid, where the two buttons are side by side with the same size and centered in the column. This way the size is perfect for mobiles, but the buttons are too big when using a browser:
<ion-header>
<ion-toolbar>
<ion-grid>
<ion-row>
<ion-col size="6" class="ion-text-center">
<ion-button style="width: 75%;">Menu</ion-button>
</ion-col>
<ion-col size="6" class="ion-text-center">
<ion-button style="width: 75%;">Abcdefghijklmn</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
<style>html, body { margin: 0; }</style>
</ion-header>
I tried to change the min-width and max-width, but when it gets perfect for browser screen size it gets too small for mobile and the button became smaller then the text inside.
As suggested here, I tried to apply expand="full", class="ion-text-wrap" and set a max-width to the button, but it loses its center property defined by class="ion-text-center" on ion-col. I then added style="text-align: center" to maintain the center property in ion-col tag, but does not make difference`.
Stackblitz
You can make responsive grid like this. (You may adjust grid size for your use case)
Ref : https://ionicframework.com/docs/layout/grid#grid-size
<ion-grid>
<ion-row>
<ion-col size-sm="6" size="6" class="ion-text-center">
<ion-button expand="full" class="ion-text-wrap min-max-width">Menu</ion-button>
</ion-col>
<ion-col size-sm="6" size="6" class="ion-text-center">
<ion-button expand="full" class="ion-text-wrap min-max-width">Abcdefghijklmn</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<style>
.min-max-width {
max-width: 200px;
margin: 0 auto;
}
</style>
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.
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>