I have this html in my ionic project
<ion-header>
<ion-toolbar mode="ios">
<ion-searchbar>
</ion-searchbar>
<ion-title>
</ion-title>
</ion-toolbar>
<ion-list class="m-0-p-0">
<ion-item *ngFor="let user of users">
</ion-item>
</ion-list>
</ion-header>
<ion-content scrollY="false">
<ion-grid>
<ion-row class="centered">
....
</ion-row>
</ion-grid>
</ion-content>
this is my centered class:
.centered{
position:fixed ;
width:100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
So, when i go into the searchbar, when the keyboard is showing up, the content of the center is moving up. I searched on the web for solutions but it seems that things have changed in ionic 4 and i cannot do: Keyboard.disableScroll(true).. or can I?
Related
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).
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 am building a project with ionic 3, and the first 3 pages use the blank ionic template, because it has to do with login, registration and then verification, and afterwards you enter the applications home page, which then i utilized the sidemenu ionic template
i have succeeded in building the application and everything works, but after adding the sidemenu templates it affects the blank templates, if you slide left on the screen the side menu shows..
this is my code..
on the app.html
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div style="height:130px;"><img src="assets/imgs/titlebg.jpg"/> </div>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}} <ion-badge *ngIf="p.badge" end>234</ion-badge>
</button>
</ion-list>
</ion-content>
<ion-footer>
<p align="center" style="color:#333333"> WihofaCITY.com</p>
</ion-footer>
</ion-menu>
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>
on the verify account view template i have this
<ion-header>
<ion-navbar color="">
<ion-title>Current Subscription</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!---- content goes here ---->
<ion-grid>
<ion-row>
</ion-row>
</ion-grid>
</ion-content>
i removed the menutoggle button but if you slide on those pages, this is what i did
<ion-navbar>
<!------------i removed this section ----------------->
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<!------------i removed this section ----------------->
<ion-title>Current Subscription</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<!---- content goes here ---->
<ion-grid>
<ion-row>
</ion-row>
</ion-grid>
</ion-content>
but yet to no avail, please is there something i was supposed to do, or is not doing? thanks in advance.
You can enable/disable the sidemenu from your controller like below
<ion-menu [content]="content" id="mymenu">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div style="height:130px;"><img src="assets/imgs/titlebg.jpg"/> </div>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}} <ion-badge *ngIf="p.badge" end>234</ion-badge>
</button>
</ion-list>
</ion-content>
<ion-footer>
<p align="center" style="color:#333333"> WihofaCITY.com</p>
</ion-footer>
</ion-menu>
And then in your controller, import MenuController
import { MenuController } from 'ionic-angular';
public menuController:MenuController
menuController.enable(true,"mymenu"); //For Enabling
menuController.enable(false,"mymenu"); //For Disabling
So far, I have been able to figure out how to left align Title and right align icon, but the problem is with input box in the center which I am not able to figure out.
Expected output Image is given below.
My Home Page Code:
<ion-header>
<ion-navbar>
<ion-title text-center>Page Title</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
Just fixed it on my own!
Home HTML file
<ion-header>
<ion-navbar>
<ion-title>Title
<ion-input type="text"></ion-input>
</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>
Variable.scss file
$text-input-md-margin-top: 0px;
$text-input-md-margin-bottom: 0px;
$text-input-md-margin-start: 0px;
$text-input-md-margin-end: 0px;
Home.scss file
ion-input
{
background-color: white;
border-radius: 5px;
display: inline;
color: black;
margin-left: 0.5em;
}
.text-input-md
{
width: 60%;
}