I'm having a big issue with aligning an icon to the left. No matter what I do, it aligns to the right side of the screen. Other pages do not have problem and aligns perfectly to the left. This issue happens when I use a tab.
How do I fix this? There's no CSS code as I'm using the default codes.
This is my ionic code:
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-segment end [(ngModel)]="stories">
<ion-segment-button value="headlines">
Headlines
</ion-segment-button>
<ion-segment-button value="new">
New
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
No matter what I do, this is the end result:
PS: I'm using the latest version of ionic.
Just like #Sam5487 said, you should use an ion-navbar instead of the ion-toolbar (if you're using the toolbar in order to avoid the back arrow icon when pushing the page, you should set that page as root instead of just pushing it to the nav stack).
About end/start/left/right
I've also seen that you've used the start attribute in the ion-buttons, but it doesn't mean it will be placed to the left, since start and end follow the UI pattern for the platform
So <ion-buttons start> would be on the left for ios and be the first button on the right for android.
And <ion-buttons end> would be on the right for ios and the last button on the right for android.
So with both start or end the button will be placed at the right on Android.
If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that.
Using the menuToggle button
That being said, if you take a look at the menuToggle docs:
If placing the menuToggle in a navbar or toolbar, it should be placed
as a child of the <ion-navbar> or <ion-toolbar>, and not in the
<ion-buttons>.
So in order to achieve the desired result, you just need to change your layout for this one:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-segment [(ngModel)]="stories">
<ion-segment-button value="headlines">
Headlines
</ion-segment-button>
<ion-segment-button value="new">
New
</ion-segment-button>
</ion-segment>
</ion-navbar>
</ion-header>
You can also confirm that this is the recommended way to do it, by taking a look at this page from the Conference App demo made by the guys at Ionic
Try this instead
<ion-header>
<ion-navbar>
//*** Rest of the header code ***//
</ion-navbar>
</ion-header>
Also in your button that is only an icon i suggest adding icon-only as well.
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
Related
Menu Example:
I am just starting out with Ionic and am not really sure why the two icons in the top left-hand corner are stacking and staying tiny. I have read through all docs and forums, however, I haven't seemed to come across a solution. Thanks in advance.
<ion-header no-lines>
<ion-toolbar>
<ion-title>Home</ion-title>
<ion-buttons icon-left start>
<!-- Float the icon left -->
<button ion-button icon-start>
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
<ion-buttons icon-right end>
<!-- Float the icon right -->
<button ion-button icon-end>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
I landed on this after copy & pasting some Ionic 3 code into my Ionic 4 project.
The best answer I can suggest is to have a look at the documentation for Ionic 4! A lot of what you've done is not Ionic 4, but Ionic 3.
Take the button docs for example: https://ionicframework.com/docs/api/button Your button won't work, because you must use something like:
<ion-button color="primary" fill="clear" expand="block" (click)="deleteRecord(i)">
<ion-icon name='trash'></ion-icon>
</ion-button>
Also, for the positioning, also look at the documentation. You should be using the slot property. for example:
<ion-chip outline="outline" color="primary" slot="start">
<ion-label> Job id : {{ interv.ts % 1000000}} </ion-label>
</ion-chip>
Note that in the two snippets above, I used different properties to determine the outline / fill. That's because the documentation told me to. So while it may not be entirely consistent, it is documented and for the most part, it works.
using ionic 3.9.2
Objective:
back button in navbar using ios-arrow-back style and "back" with translate pipe
with setBackButtonText(), manage to set back button text.
But it's tedious to do it for every page with getting reference of nav bar, set text after view init.
Any way to set back button text in template in which can set it like {{ 'back' | translate }}
How to use other icon for back button?
first try: ion-nav-back-button, prompt ion-nav-back-button not known
second try:
<ion-buttons start>
<button ion-button>
<ion-icon name="ios-arrow-back"></ion-icon>
<p>back</p>
</button>
</ion-buttons>
However, it's strange that even with start, the button is on right end.
Playground:
ionic playground
hope to see advice, thanks
Try this. Works well on android and ios
<ion-buttons left>
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">Back</span>
</button>
<button ion-button (click)="dismiss()">
<ion-icon name="arrow-round-back" showWhen="android,windows"></ion-icon>
</button>
</ion-buttons>
I would like to change the ion-icon used in my navbar's back button, which appears when a page has been pushed onto the nav stack. Here is my code:
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon [name]="navbarIcon"></ion-icon>
</button>
<ion-title>Title</ion-title>
</ion-navbar>
</ion-header>
The "name" directive affects the appearance of the menu toggle button, but it has no effect on the back button. Is there a way to modify my code so I can change the icon displayed in the back button?
I looked at this question, but it is for Ionic 1 and I also think there should be a better way.
I was able to do this by hiding the default back button and adding a custom one.
In the Page where I need the custom back button, just set the header as below
<ion-header>
<ion-navbar hideBackButton="true">
<ion-title>Details</ion-title>
<ion-buttons left>
<button ion-button navPop icon-only>
<ion-icon name="exit"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Stackblitz link with working demo: https://stackblitz.com/edit/ionic-jihfrp
I am trying to have a ion-header where one icon is on left and another on right. my code looks like below
<ion-header>
<ion-navbar>
<ion-buttons icon-start>
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title text-center>about</ion-title>
<ion-buttons icon-end>
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
but what is hapenning is that i see it coming in 3 different rows.
ok, you need remove the first <ion-buttons> and leave only <button> and on the second tag of <ion-buttons> change icon-end to end.
and it should work!!
Welcome to StackOverflow!
Since Ionic applies the android/ios standards based on the current platform where the app is running, you need to understand the meaning of the following attributes: start, end, left and right.
About end/start/left/right
Using the start attribute in the ion-buttons doesn't mean it will be placed to the left, since start and end follow the UI pattern for the platform
So <ion-buttons start> would be on the left for ios and be the first button on the right for android.
And <ion-buttons end> would be on the right for ios and the last button on the right for android.
So with both start or end the button will be placed at the right on Android.
If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that. It's easier to see with a few examples, so please take a look at the following examples.
Example 1: Using start and end
<ion-header>
<ion-navbar>
<ion-buttons start> <!-- Here we use start -->
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons end> <!-- Here we use end -->
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The result is:
iOS
Android
Example 2: Using left and right
<ion-header>
<ion-navbar>
<ion-buttons left> <!-- Here we use left -->
<button ion-button icon-only>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Home</ion-title>
<ion-buttons right> <!-- Here we use right -->
<button ion-button icon-only>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
The result is:
iOS
Android
I have a mobile app/website (in Ionic 3.25) under construction and wanted to support the desktop web browser experience without wasting all that screen space. I stumbled across Ion-Split-Pane. It seemed perfect from the documentation, allowing me to pop open the sidemenu as a full menu when a large screen was used. I set the code as recommended in the app.html file:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</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>
</ion-split-pane>
The behavior I'm getting when using Ionic Serve is baffling. When I use a large screen (above somewhere around 922 pixels wide), I get a three pane experience, with a bunch of whitespace containing nothing in the far right. This was surprising, since I thought the app would use the available space:
When I then shrink below that size, the entire website/app disappears. The elements are still in the html, but nothing is drawn to the screen.
This behavior is so far from the documentation that I must have something wrong, but I'm not certain what. Anyone know how I could get this panel working?
After working on this for a while, I discovered my problem. It isn't mentioned explicitly in the documentation, so I'll post the answer here in case anyone else runs into it.
When converting a side-menu project to use Ion-Split-Pane, the content section needs to have the main keyword added to the <ion-nav> object. #content and [root] are not enough.
The amended code:
<ion-split-pane when="md">
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</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" main #content swipeBackEnabled="false"></ion-nav>
</ion-split-pane>
Without that line, the entire application is thrown into the 'menu' pane and simply disappears when going to the mobile view.