I am currently developing an app with ionic 3 and I experience one problem from the beginning.
The Statusbar on the startpage (ONLY on the startpage) looks transparent. Here‘s a screenshot:
But all the other pages look how they should look:
Why is that so and what can I do to get rid of this issue?
HTML of the startpage:
<ion-content>
<div class="head">
<div class="balance">
301 €
</div>
<div class="balancetext">
CURRENT BALANCE
</div>
<div class="menu">
<button class="addbutton" (click)="onNewIncome()">
<img src="./assets/imgs/plus.png"> INCOME
</button>
<div class="split"></div>
<button class="exbutton">
<img src="./assets/imgs/minus.png"> EXPENSE
</button>
</div>
</div>
</ion-content>
and necessary SCSS:
html, body{
width: 100%;
background-color: #f5f8fa;
}
.head{
background-image: url('../assets/imgs/pattern_1.png');
background-size: cover;
height: 15em;
box-shadow: 0px 0px 30px rgba(0,0,0,0.3);
}
Related
I have build a android application. So I wanted to customize the header of the application
Here is the HTML code
<ion-header>
<ion-toolbar>
<ion-title>Verification Code</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="verification">
<div class="verification-container">
<div class="heading">
<ion-label>OTP</ion-label>
</div>
<div class="sub-heading">
<ion-label>OTP has seen to your registed phone number. Please verify</ion-label>
</div>
<div class="otp">
<ng-otp-input [config]="{length:6}"></ng-otp-input>
</div>
<div class="send-again">
<ion-label>Didn't recieved OTP ?</ion-label><a> Send again</a>
</div>
<div class="verification-btn">
<ion-button class="verify-btn" type="submit" expand="block" (click)="verified()" color="secondary">Verify</ion-button>
</div>
</div>
</ion-content>
Here is the CSS for changing the header (global.scss)
ion-toolbar, ion-header {
--min-height: 71px;
--background: transparent;
--border-color: transparent;
}
ion-title {
margin-top: 47px;
height: 25px;
font-weight: 500;
font-size: 18px;
color: #292929;
}
in web browser I can see the header changes but if I installed the apk file in android phone header changes are not there
I need to border-radius in ion-menu but when i am doing its applying on shadows of entire page. i need to just do in white menu.
This is how its showing
I need to show like this
My app.component.html
<ion-app>
<ion-menu side="end" contentId="menu-content">
<ion-content >
<div >
<div style="text-align: right;">
<ion-icon name="more" style="font-size: 25px;"></ion-icon>
</div>
<div style="display: flex; justify-content: center;">
<ion-avatar style="text-align: center;">
<img src="../../assets/img/demo.jpg">
</ion-avatar>
</div>
<div style="text-align: center; margin-top: 15px; font-size: 18px;">
Downloads
</div>
<div style="text-align: center; margin-top: 15px; font-size: 18px;">
Sign Out
</div>
<div style="text-align: center; margin-top: 15px; font-size: 18px;">
</div>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-app>
global.scss
ion-menu{
--background: white !important;
--width: 150px;
--height: 170px;
}
When i add border-radius in ion-menu its just change the radius on entire blur page. I need to know hoe can i change the radis of just white box which have width of 150px;
Sergey was right, for these kinds of things you need to use popover - https://ionicframework.com/docs/api/popover.
Using your code I was able to create quickly the UI you needed.
Also, I've put the code on github so you could see what I did there: https://github.com/App-to-date/menu-popover
If help another person, work...
const popover = await this.popoverController.create({
component: MenuComponent,
event: event,
translucent: false
});
// INJECT BORDER-RADIUS
popover.shadowRoot.lastChild.lastChild['style'].cssText = 'border-radius: 20px !important;';
return await popover.present();
HTML:
<ion-menu side="end" contentId="menu-content">
[style]="sanitizer.bypassSecurityTrustStyle(yourStyle)">
TypeScript:
import {DomSanitizer} from "#angular/platform-browser";
yourStyle = "--background: white !important; --width: 150px; --height: 170px;"
constructor(private sanitizer: DomSanitizer)
I have combed through compatibility issues on this site looking for fixes for this problem and I cannot seem to find any posts with quite the same issue as me.
Basically, when I load the app in chrome browser and inspect through all phone sizes, it is responsive and it works. However when I actually open the app web address in my personal iphone, the toggle menu does not work. It drops down behind the main content and is hardly clickable. Can anyone help?
Here is a link to the app:
https://evening-stream-86674.herokuapp.com/index.html
Here is the portion of the CSS file:
* {
box-sizing: border-box !important;
}
html {
height: 100%;
}
body {
background: url("../images/tree.png") no-repeat center center fixed;
background-size: cover;
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
/*my favorite lime green color #47dd1b*/
li {
background-color: black;
}
.navbar {
margin-bottom: 0;
border-radius: 0 !important;
height: 8%;
}
#media only screen and (max-width: 640px) {
/* For mobile phones: */
li {
width: 100%;
}
.navbar {
width: 100%;
}
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">John Wolfe</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>
About
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id="wrap">
Edited to show less code.
How I can align the icon to the rightcorner position.
but it needs to be responsive too.
I have tried using header in ionic but the right alignment is not working properly.
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
By right corner position, do you mean you want it to be on the header bar's right corner side?
If so, any button/a tag after h1 div would be placed on the right side.
<div class="bar bar-header">
<button class="button icon ion-navicon"></button>
<h1 class="title">Header Buttons</h1>
<button class="button">Edit</button>
</div>
If not, can you provide a codepen so I can take a look?
You can try this with position: absolute on image span. Something like this:
<div class="bar bar-header" style="background-color:silver; position:relative">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="position:absolute; right: 10px; top: 5px;">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
You can also use float: right:
<div class="bar bar-header" style="background-color:silver;">
<span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
<span class="title margin-align" style="float:right">
<img src="logo.img" style="width:45px;height:45px;"></img>
</span>
<i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>
</div>
I guess this might solve your problem of right aligning your image along with responsive design.
I'm trying to vertically align my text on my screen. I've read through the docs on how to do this. But I'm still not having any luck. This is my code:
<div class="row">
<div class="col col-center text-center">
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</div>
HTML
<div class="row">
<div class="col">
<div class="text-center">
<h5 style="text-align: center;">This text is in the center of the screen</h5>
</div>
</div>
</div>
This works on Ionic Framework 3.0.1:
HTML:
<ion-content padding>
<div>
<h4 class="gray">This text is in the center of the screen</h4>
</div>
</ion-content>
SASS:
ion-content {
div {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
Try this solution:
1.Add new css styles:
.home .scroll-content {
display: table !important;
width: 100% !important;
height: 100% !important;
margin-top: -50px; /* the height of the centered content */
text-align: center;
}
.home .scroll {
display: table-cell;
vertical-align: middle;
}
2.Apply home class to ion-view:
<ion-view class="home">
demo
How about specify the "height"?
Anyway, centralize your text in horizontal, you can also use align="center".
(To make it clear, I added the color to row and col.)
<div class="row" style="height: 900px; background-color: blue;">
<div class="col col-center" style="background-color: red;>
<h4 class="gray" align="center">This text is in the center of the screen</h4>
</div>
</div>