I have created ionic project from cli. Ionic version is 3. I am trying to make title image in center. Somebody please help me
<ion-menu [content]="content">
<ion-header>
<ion-toolbar color='primary'>
<ion-title>
<img src="assets/imgs/logo.png" width="128" />
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
you can use ionic CSS utilities to align center
<ion-title text-center>
<img src="assets/imgs/logo.png" width="128" />
</ion-title>
Read More about css utilities
https://ionicframework.com/docs/theming/css-utilities/
When you want to center an element, add the text-align: center property to its parent element.
In your case, you need to change the code to:
<ion-title style="text-align: center">
<img src="assets/imgs/logo.png" width="128" />
</ion-title>
Related
I'm using Ionic4, I have a page that has two ion-toolbar, the first contains the page title, while the second ( which is pretty long )contains some important data.
I want to fix only the first toolbar, and the second must scroll with the rest of the page.
Here's a screen of the page:
My Html code..
<ion-header>
<ion-toolbar class="header">
<ion-title class="page-title">
{{mail.subject}}
</ion-title>
</ion-toolbar>
<ion-toolbar class="mail-infos" >
<ion-grid>
<ion-row>
<ion-col> contentts
</coll>
</ion-row>
</ion-grid>
<ion-toolbar>
</ion-header>
<ion-content> content </ion-content>
The below is the html code for an ionic page. I am trying to apply padding and adjust the location of the content. In some places it is not working.
I want the login form to be located further down in the screen. Changing the values of <div padding-top="100px">(line 10 in the code)
is not doing anything. How to correct this?
Login.html
<ion-header>
<ion-navbar color="primary">
<div class="row">
<ion-title>Login</ion-title>
</div>
</ion-navbar>
</ion-header>
<ion-content padding>
<div padding-top="100px">
<form [formGroup]="loginForm" (submit)="loginUser()" novalidate padding id="loginForm">
<ion-item id="loginItem_1">
<ion-label stacked id="loginLable">Email</ion-label>
<ion-input #email formControlName="email" type="email" placeholder="Your email address"
[class.invalid]="!loginForm.controls.email.valid &&
loginForm.controls.email.dirty" color="secondary">
</ion-input>
</ion-item>
<ion-item class="error-message" *ngIf="!loginForm.controls.email.valid &&
loginForm.controls.email.dirty" id="loginItem">
<p id="loginLable">Please enter a valid email.</p>
</ion-item>
<ion-item id="loginItem_2">
<ion-label stacked id="loginLable">Password</ion-label>
<ion-input #password formControlName="password" type="password" placeholder="Your password" color="secondary">
</ion-input>
</ion-item>
<button ion-button block type="submit" id="loginButton">
Login
</button>
</form>
</div>
<button ion-button block clear (click)="goToResetPassword()">
I forgot my password
</button>
<button ion-button block clear (click)="createAccount()">
Create a new account
</button>
</ion-content>
<ion-footer>
<ion-toolbar color="primary">
<ion-title>Created By</ion-title>
</ion-toolbar>
</ion-footer>
View
Don't use inline styles. Which is very very BAD.
You can try as shown below.
page.html
<div class="padding-top-100">
</div>
page.scss
.padding-top-100 {
padding-top:100px;
}
Inline CSS needs to be defined in the style HTML attribute like so:
<div style="padding-top: 100px;">
There is no "padding-top" attribute hence why it's not doing anything
I would recommend giving that div an id / class and targeting it with CSS instead, makes it easier to manage (Ionic comes with basic styling by default)
Try using this:
<ion-content padding="true">
You can see the example on this website :
http://ionicframework.com/getting-started
I have created a simple chat form in Ionic.
Problem: Buttons are going out of screen.
It looks like this this -
My chat.html
<ion-header>
<ion-navbar>
<ion-title>communicationgiven</ion-title>
<button ion-button (click)="close()" style="margin-left: 90%;margin-top: -3%">Close</button>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<div>
<p *ngFor="let list of list; let i = index;">
<ion-item>
<!-- <p style="color: #1bb0f4;font-size: 20px;">Tagto {{list.TAG_TO}}</p> -->
<p style="color: #1bb0f4;"> {{list.TAG_FROM}}</p>
<p style="color: #d2dce1;"> {{list.TAG}}</p>
</ion-item>
</p>
</div>
</ion-list>
</ion-content>
<ion-footer class="footer">
<form #com="ngForm" (submit)="onsubmit(com.value)">
<ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
<button ion-button type="submit" style="margin-left: 90%;margin-top: -5%;">Submit</button>
</form>
</ion-footer>
I want to know why my buttons are going out of the page; how can I make sure they stay inside the screen, irrespective of the screen size?
What is the best practice here? I am fairly new in CSS.
You have to use below code for left button
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Page Title
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="openModal()">
<ion-icon name="options"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
For footer you can use ion-grid
<ion-footer class="footer">
<form #com="ngForm" (submit)="onsubmit(com.value)">
<ion-grid>
<ion-row>
<ion-col col-9>
<ion-input placeholder="TAG" type="text" name="TAG" ngModel ></ion-input>
</ion-col>
<ion-col col-3>
<button ion-button type="submit">Submit</button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</ion-footer>
For more info please refer this
https://ionicframework.com/docs/api/components/toolbar/Navbar/
you had given style="margin-left: 90% that is margin from left side is 90% so obviously it will go out of screen, try to decrease the value.
It's hard to answer this one as I can't replicate the issue locally with what you've provided.
I'd start by reducing the margin-left: 90% on the button element, see how that goes.
In regard to best practices, an important one is to not use inline styles. That is putting styles in the style html attribute. Instead try using an external style sheet or at least an internal style sheet, see: https://www.w3schools.com/css/css_howto.asp
I am using ion-img inside a virtualScroll element.
The image is HD resolution and I want to scale it down for device widths. I thought ion-img took care of this with its CSS properties, but it does not.
So, setting no width or height on the ion-img means I get a 20x20 grey square.
Setting a width and height of 1920x1080 means I get a huge image on most devices that goes way off screen.
How can I set this to be responsive? I want it to scale with the screen. I can easily do this with a standard img by setting width to 100%.
Below is my code:
<ion-header>
<ion-navbar>
<ion-title>{{ selectedCategory.name }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list [virtualScroll]="selectedCategory.videos" approxItemHeight="300px" approxItemWidth="100%">
<ion-item class="class" *virtualItem="let item; let i=index" padding>
<div *ngIf="item.available != true; then locked; else unlocked"></div>
<ng-template #unlocked>
<div class="video">
<ion-img [src]="item.poster_image_s3" (click)="play(item.video_s3)"></ion-img>
</div> <!-- .video -->
<p class="title"
(click)="play(item.video_s3)"
[ngStyle]="{'color': '#' + selectedCategory.color_hex_code }">
<svg-icon src="assets/img/icons/play-button.svg"
[ngStyle]="{
'fill': '#' + selectedCategory.color_hex_code
}"></svg-icon>
Watch Demo
</p>
<p class="subtitle">{{ item.name }}</p>
</ng-template> <!-- #unlocked -->
<ng-template #locked>
<div class="video">
<div class="locked">
<img src="assets/img/icons/studio-locked.svg" alt="Locked" class="icon">
</div> <!-- .locked -->
<ion-img [src]="item.poster_image_s3"></ion-img>
</div> <!-- .video -->
<p class="title">
Subscribe to Watch
</p>
<p class="subtitle">{{ item.name }}</p>
</ng-template> <!-- #locked -->
</ion-item> <!-- .class -->
</ion-list>
</ion-content>
the parent page:
<ion-view view-title="my account" >
<ion-nav-bar class="bar-assertive" align-title="center" ></ion-nav-bar>
<ion-content >
<ion-list>
<ion-item>
<ion-item class="item-remove-animate item-icon-left item-icon-right" type="item-text-wrap" ui-sref="tab.modipass">
<i class="icon ion-ios-unlocked-outline"></i>
<div>company profile</div>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
the child page:
<ion-view view-title="about company" on-swipe-right="closePage()">
<ion-nav-bar class="bar-assertive" align-title="center">
<ion-nav-buttons side="left">
<button class="button button-clear button-light" ng-click="closePage()">
<i class="ion-ios-arrow-back" style="font-size:20px"></i>
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="padding">
<ul class="list">
<li class="item item-text-wrap item-borderless">about company</li>
</ul>
</ion-content>
</ion-view>
both the parent page and the child page have nav-bar, they have the same assertive color and different title.
when swipe from child back to parent, the child page nav bar becomes blank,no title,no color. the parent page nav bar is normal.
the above situation only happens when swiping.
Please help to check why?
I think it's a bug on Ionic, now I solved it by adding a CSS class
ion-nav-bar.hide {
display: block !important;
}
Remember that is a workaround, follow this issue to tracking the fix.