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>
Related
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 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);
}
it's work perfect when slides first index to last but when auto loop go to last index to first index click property is not working.
<ion-slides *ngIf="slides != null" autoplay="3000" loop="true" speed="800" >
<ion-slide *ngFor="let slide of slides" >
<img [src]="slide.BannerImage">
<div class="con-box">
<h2>{{slide.BannerName}}</h2>
<br/>
<button ion-button color="btn" (click)="fnGotoNewArrivalList(slide.CollectionID,slide.BannerName)">Order Now</button>
</div>
</ion-slide>
</ion-slides>
#jatin devani please try this code..
replace ion-slides in place use swiper
html
<!-- Swiper -->
<swiper class="swiper-container" [config]="config" #usefulSwiper>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</swiper>
index.html
<script src="assets/js/swiper.jquery.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
.ts file
config:any;
this.config = {
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
initialSlide : 0,
slidesPerView: 1,
// paginationType: 'progress',
// pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
};
css file
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
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.
I'm using a form with materialize css. I have a link with my login project here: http://clients.paulofrutuoso.pt/login.html I want to put a show and hide password in the form. I'm using this example: https://github.com/cloudfour/hideShowPassword
And I have this CSS for the icons
::-ms-reveal,
::-ms-clear {
display: none !important;
}
.hideShowPassword-toggle {
background-color: transparent;
background-image: url('../images/wink.png'); /* fallback */
background-image: url('../images/wink.svg'), none;
background-position: 0 center;
background-repeat: no-repeat;
border: 2px solid transparent;
border-radius: 0.25em;
cursor: pointer;
font-size: 100%;
height: 44px;
margin: 0;
max-height: 100%;
padding: 0;
overflow: 'hidden';
text-indent: -999em;
width: 46px;
-moz-appearance: none;
-webkit-appearance: none;
}
.hideShowPassword-toggle-hide {
background-position: -44px center;
}
.hideShowPassword-toggle:hover,
.hideShowPassword-toggle:focus {
border-color: #0088cc;
outline: transparent;
}
This is the html:
<div class="container clearfix">
<div class="container-app-club">
<div class="row">
<div class="col s5 right-align"> <img class="responsive-img " src="images/palmeiras.png" width="130" height="130"> </div>
<div class="col s2 center-align"><hr class="vertical"/></div>
<div class="col s5 left-align"> <img class="responsive-img " src="images/app-brasao.png" width="130" height="130"> </div>
</div>
</div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label class="active" data-success="Campo Obrigatório">E-mail</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password-1" type="password" class="validate">
<label class="active" data-error="Campo Obrigatório">Senha</label>
<div class="form-error">Campo obrigatório</div>
</div>
<div class="col s12 right-align"> Recupere sua senha! </div>
</div>
</form>
</div>
<div class="col s12">
<button class="btn btn-w waves-effect" href="preencher-cpf.html">Login</button>
</div>
<div class="col s12 center-align" style="margin-top:15px;"> Ainda não está registado? Cadastre-se </div>
</div>
And I have this JS in the html:
$('#password-1').hidePassword(true);
The icon is on the right end of the form and it toggles just fine but the size of the input doesn't shows in responsive way. The icon crashes the input responsible design.
Any ideas to solve this?
thank you so much.
Done. I just add this css code:
.hideShowPassword-wrapper{
position: relative;
display: inline-block;
vertical-align: baseline;
width: 100%!important;
}
.hideShowPassword-field{
margin: 0px;
padding-right: 0!important;
}