I have this kind of header in ionic 3
What I wanted to do was center the home title while ignoring the space occupied by my ion avatar
Here's what I tried
<ion-header >
<ion-navbar style="text-align: center;">
<ion-title>Home</ion-title>
<ion-buttons end>
<button ion-button round clear (click)="goToAccountPage()">
<ion-item class="transparent">
<ion-avatar item-end>
<!-- <img src="{{photo_url}}"> -->
<img [src]="photo_url" >
</ion-avatar>
</ion-item>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
and this
<ion-header >
<ion-navbar>
<ion-title text-center>Home</ion-title>
<ion-buttons end>
<button ion-button round clear (click)="goToAccountPage()">
<ion-item class="transparent">
<ion-avatar item-end>
<!-- <img src="{{photo_url}}"> -->
<img [src]="photo_url" >
</ion-avatar>
</ion-item>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
And then I tried implementing it directly and not inline
<ion-title class="center">Home</ion-title>
.center{
text-align: center;
}
To those who will encounter the same problem, please go to nourza's awesome and responsive answer :)
From this
to this
5]
Try this
.center{
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
You can use the following solution to selectively center text:
{
position: absolute;
text-align: center;
width: 100%;
left: 0;
}
Related
I have a side menu always visible in my ionic aplication, the problem is I don't know how to change the #shadow-root css, I tried a few things but still don't work.
The problem is that when I make the menu smaller and empty space is left there. I want to remove that empty space, because when the screen is bigger the empty space is even bigger.
I searched in the debug console and this is the troublesome element:
This is my code:
HTML:
<ion-split-pane contentId="side-menu" class="menu-left" when="md">
<ion-menu side="start" menuId="side-menu" contentId="side-menu" mode="md" class="menu2">
<ion-header>
<ion-toolbar>
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list lines="none" class="menu-content">
<ion-item (click)="navigateHome()">
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Inicio</ion-label>
</ion-item>
<ion-item (click)="navigateAnimes()">
<ion-icon name="library" slot="start"></ion-icon>
<ion-label>Animes</ion-label>
</ion-item>
<ion-item (click)="navigateMine()">
<ion-icon name="bookmarks" slot="start"></ion-icon>
<ion-label>Mi lista</ion-label>
</ion-item>
<ion-item (click)="navigateSettings()">
<ion-icon name="options" slot="start"></ion-icon>
<ion-label>Ajustes</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="side-menu"></ion-router-outlet>
</ion-split-pane>
CSS:
.menu-left{
--width: 200px;
}
.menu-content {
height: 100% !important;
width: 200px;
}
Can anyone tell me how to apply my css attributes to the inner-scroll scroll-y in the shadow class please?
#phantomiam123 I updated my css class and doesn't work:
My css class now is:
.menu-left{
--width: 200px;
}
.menu-content {
height: 100% !important;
width: 200px;
}
.inner-scroll .scroll-y {
width: 200px;
}
And in the debug console:
This seems to work for me for now:
.split-pane-visible > ion-menu {
max-width: 200px!important;
}
Because of the title issue in ionic 2 for android. i have set some css and make centre of title.and i have put the left and right button in the nav bar. but when i apply the onclick functionality for that two button.its not working. even no console message too.
here is my code :
html :
<ion-header>
<!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
<ion-toolbar>
<ion-buttons class="loginnavbtn" (click)="goback()" left>
CANCEL
<!-- left aligned content here -->
</ion-buttons>
<ion-title>
LOGIN
</ion-title>
<ion-buttons class="loginnavbtn" (click)="loginbtntap()" right>
SAVE
<!-- left aligned content here -->
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
My css :
ion-header {
.button-md {
box-shadow: none;
}
.toolbar-title {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 15px;
font-weight: 500;
}
}
my js :
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
constructor(public navCtrl:NavController) {
}
public goback() {
this.navCtrl.pop();
}
public loginbtntap() {
this.navCtrl.pop();
}
}
My onclick is not working.what i ma doing wrong ?
Thanks !!
Here is the solution that works.
<ion-header>
<ion-navbar>
<ion-buttons *ngIf="user != null" left>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-buttons *ngIf="user == null" left>
<button ion-button (click)="loginBtnClicked()">
<ion-icon name="log-in"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons right>
<button ion-button (click)="searchClicked()">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
I faced the same issue in ionic3.
Please use button tag with ion-buttons and this solution works for me.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<ion-header>
<!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
<ion-toolbar>
<button ion-buttons class="loginnavbtn" (click)="goback()" left>
CANCEL
<!-- left aligned content here -->
</button>
<ion-title>
LOGIN
</ion-title>
<button ion-buttons class="loginnavbtn" (click)="loginbtntap()" right>
SAVE
<!-- left aligned content here -->
</button>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
Try to use ion-button
<button ion-button class="loginnavbtn" (click)="goback()" left>Name of button</button>
I am using ionic 2. And I am making the navbar as title as centre . and one left and right button with some onclick function. I got some solution that will keep the title as centre. But the left and right button are not in proper way. It's like vertical one by one. But I need horizontally. I tried lot but not able to get that?
Here's my code :
My scss :
ion-header {
.button-md {
box-shadow: none;
}
.toolbar-title {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 15px;
font-weight: 500;
}
}
my html :
<ion-header>
<ion-toolbar>
<ion-buttons >
<button ion-button class="loginnavbtn" (click)="goback()" left>Save</button>
</ion-buttons>
<ion-title>
LOGIN
</ion-title>
<ion-buttons >
<button ion-button class="loginnavbtn" (click)="goback()" right>Save</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
The output that i need:
**cancel LOGIN Save**
But the output i am getting :
I applied some css to make my button to move right, but it increasing whole navbar height .
I think you just need to add the ion-buttons start and end
<ion-buttons start>
<button ion-button class="loginnavbtn" (click)="goback()" left>Save</button>
</ion-buttons>
<ion-title>
LOGIN
</ion-title>
<ion-buttons end>
<button ion-button class="loginnavbtn" (click)="goback()" right>Save</button>
</ion-buttons>
I referred to my button to align left and right start and end key as per the above link. But i am not able to set my button as per the view in the link here is my output image
Here is my code
<ion-header class="home">
<ion-navbar primary padding>
<ion-row>
<ion-buttons start>
<button menuToggle >
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-row>
<ion-row>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-row>
</ion-navbar>
</ion-header>
What I have tried so far is:
float: right; and float: left;
algin: right
but not able to get my button to left
You can achieve that layout by using an <ion-toolbar> to place the search bar like you can see in this plunker
<ion-header class="home">
<ion-navbar primary padding>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Auto Parts</ion-title>
<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>
<button><ion-icon name="heart"></ion-icon></button>
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
<ion-toolbar primary>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-toolbar>
</ion-header>
EDIT:
To hide both borders, the no-border attribute should be used on the
ion-toolbar. To hide the top or bottom border, the no-border-top and
no-border-bottom attribute should be used.
In ionic how can i put a button at some percentage from the bottom ion-content?
I've tried
<ion-view>
<ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-content>
</ion-view>
css:
.button-bottom{
position: absolute;
bottom: 30%;
}
but the button now not take the full width.
Try giving your container an explicit width:
.button-bottom{
position: absolute;
bottom: 30%;
width: 100%;
}
Add "full" variable in your button
Ex:- button class="button button-block button-energized" full >Button</button>
For more reference see Ionic Documentation on UI Components in the link below.
Ionic Full Button
Just move the button to outside of the ion-content.
Example:
Ionic 3:
<ion-view>
<ion-content>
</ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-view>
Ionic 4:
<ion-header>
<ion-toolbar>
<ion-title>Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p> your content </p>
</ion-content>
<ion-row>
<ion-col>
<ion-button>
Button Bottom (Not fixed on scroll)
</ion-button>
</ion-col>
</ion-row>