Android layout featuring Ionic2 navbar with icons aligned on both sides at the top

<ion-header>
    <ion-navbar align-title="center" color="primary" hideBackButton>
        <ion-buttons ion-button icon-only start class="card-buttons">
            <button class="card-buttons" (tap)="openMenu()">
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>
        
        <ion-title class="card-title">        
            {{title | translate}}
        </ion-title>
        <ion-buttons  ion-button icon-only end>
            <button ion-button (tap)="goBack()">
                <ion-icon name="md-arrow-round-back"></ion-icon>
            </button>
            <button ion-button (tap)="share()">
                <ion-icon name="share" class="ion-md-share"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

There is an issue with the menu icon placement where it should display on the left but shows up on the right side instead. This problem seems to occur on Android devices, while it works fine on iOS.

If anyone has a solution or workaround for this problem, I would greatly appreciate your help.

Thank you!

androidcssangularionic2

Answer №1

This particular layout is intentional for both android and windows operating systems.

To further explore this issue, please refer to this github problem

The start option positions it on the left side of the title in ios, and on the right side in md and wp mode. If you prefer a button to consistently appear on the left side, regardless of the mode, utilize the left property instead.

You can attempt the following solution:

<ion-header>
    <ion-navbar align-title="center" color="primary" hideBackButton>
        <ion-buttons icon-only left class="card-buttons">
            <button ion-button class="card-buttons" (tap)="openMenu()">
                <ion-icon name="menu"></ion-icon>
            </button>
        </ion-buttons>

        <ion-title class="card-title">        
            {{title | translate}}
        </ion-title>
        <ion-buttons icon-only right>
            <button ion-button (tap)="goBack()">
                <ion-icon name="md-arrow-round-back"></ion-icon>
            </button>
            <button ion-button (tap)="share()">
                <ion-icon name="share" class="ion-md-share"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

For additional information, also visit this page

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to successfully submitting an Angular form that includes a nested component

I have developed a custom dateTime component for my application. I am currently facing an issue where I need to integrate this component within a formGroup in a separate component. Despite several attempts, I am unable to display the data from the child fo ...

angulartypescriptangular7angular-forms

How can we eliminate all elements from jQuery except for the first and second elements?

HTML <div class="geo_select"> <h3>header 3</h3> in Above HTML code i want to remove all element except <h3> and default content<div> inside the <div class='geo_select'> in jquery.. How to remove all ...

javascriptjqueryhtmlcss

The main-panel div's width increase is causing the pages to extend beyond the window's width limit

I recently downloaded a Reactbootstrap theme and managed to integrate it with NextJS successfully. However, I am facing an issue where my <div className="main-panel"> in the Layout.js is extending slightly beyond the window. It seems like t ...

htmlcssreactjsnext.jsreact-bootstrap

Utilize ngModel to access input files in the array

Within my form, there is a file upload input: <input type="file" [(ngModel)]="item.image" name="image" #image> Can I retrieve #image.files[0] using the ngModel item.image directly (without creating a reference)? If not, what exactly does ngModel s ...

angular

Footnote fiascos

I am currently in the process of creating a footer for my webpage and have implemented the following CSS styling: #footer { height: 100px; background-color: #F3F3F3; position: absolute; bottom: 0; } Although the footer is displaying at th ...

htmlcss

Tips for preventing browsers from losing style information stored in inputs

https://i.sstatic.net/ab9nF.jpg My custom input field has unique CSS styles applied to it, but unfortunately, when the browser auto-fills the information in those fields, the styles get reset. ...

cssbrowser

Utilize field variables for anonymous listener functionality

I'm facing a common issue with Android development and need help finding a solution. When dealing with multiple buttons or text views that require similar listeners attached to them, the challenge lies in having each listener access different field va ...

javaandroidlistener

What could be causing the error in the console when I try to declare datetime in Ionic?

I am just starting out with Ionic and Angular, but I seem to have hit a roadblock. The compiler is throwing an error that says: node_modules_ionic_core_dist_esm_ion-app_8_entry_js.js:2 TypeError: Cannot destructure property 'month' of '(0 , ...

angulartypescriptionic-framework

Parent variable in Angular Type Script causing undefined error

Can anyone explain why I keep receiving an undefined error? export abstract class BaseEditorComponent implements IPropertyEditor, OnDestroy { @Input() public element: BpmnJS.IRegistryElement; --more code here export class CommonPropertiesEditorCo ...

angulartypescript

Webapp allowing users to log in to Facebook within the app

Currently in the process of developing a web app using PhoneGap for both IOS and Android platforms. Within my web app, I've implemented a login form that integrates with Facebook. However, instead of redirecting users to the browser for Facebook logi ...

androidiosfacebookcordovafacebook-graph-api

The Angular CLI has encountered an issue - Syntax Error: Unexpected token {

After using Angular CLI to successfully create projects for some time, I encountered an issue today when attempting to serve a new project. ng serve Unexpected token { SyntaxError: Unexpected token { at exports.runInThisContext (vm.js:53:16) at Modu ...

angularbuildnpm

Ensure that the sidebar automatically scrolls to the bottom once the main content has reached the bottom

I am facing an issue with a sticky sidebar that has a fixed height of calc(100vh-90px) and the main content. The sidebar contains dynamic content, which may exceed its defined height, resulting in a scrollbar. On the other hand, the main content is lengthy ...

javascriptcssreactjs

What is the method for gathering an array of emitted values from Observable.from?

So I'm working with Rxjs and have a bunch of code: return Observable.from(input_array) .concatMap((item)=>{ //This section emits an Observable.of<string> for each item in the input array }) .sc ...

angularasynchronousrxjsreactive-programmingobservable

Is there a way to modify the color of ASCII art letters within HTML's <pre> tags?

For this illustration, I aim to transform the letter "y" into a shade of blue. ,ggggggggggggggg dP""""""88""""""" Yb,_ 88 `"" 88 88 88 gg gg 88 I8 8I gg, 88 ...

htmlcssasciiascii-art

Troubleshooting the malfunctioning of the Bootstrap slide animation

I've been attempting to implement scroll animation on a div, but for some reason, it's not working as intended. I must have made a mistake somewhere, but I can't figure out where. Any help in resolving this issue would be greatly appreciated ...

javascriptjqueryhtmlcsstwitter-bootstrap

Pyramid CORS does not support the PUT and DELETE HTTP methods

My current issue involves the pyramid framework. I have added a function to pyramid add_cors_headers_response_callback(event): def cors_headers(request, response): response.headers.update({ 'Access-Control-Allow-Origin': &ap ...

pythonangularpyramid

Dynamically loading components within an Angular application

I am tasked with displaying different components at specific times by iterating through them. Below is an example of how I have attempted to achieve this. The components I can use are determined by the server. <ngb-tabset [activeId]="1"> ...

javascriptangulartypescriptangular-material

Step-by-step guide to applying a CSS class to a grid cell using Syncfusion

Is there a way to define a specific style for a cell using the Syncfusion grid grouping control? I attempted the code below, but it doesn't seem to be effective in my webform. tdescriptor.Columns[0].Appearance.AnyRecordFieldCell.CssClass = "hideColum ...

cssgridcellsyncfusion

Resolving the Blank Space Problem in DataTable CSS Styling

I encountered an unusual issue while working with DataTable in my project. Here's a link to view my DataTable example I have also attached a picture illustrating the problem I am facing. Is there a way to remove the blank space containing filter but ...

jqueryhtmlcssdatatable

The sidebar is not correctly displaying at full height

Having trouble getting the sidebar to fit perfectly between the header/nav and footer in full height. <html> <head> <meta charset="utf-8"> </head> <body> <header> <div class="header"> & ...

javascripthtmlcss