Ionic 4: Ionic Tab Bar isn't displayed in Chrome - ionic-framework

I am trying to make Website with a Tab-Bar at the top. It all seems to work in Firefox and Edge, but in Chrome it doesn't show the tab-bar at all. My home.page.html looks like this:
<ion-header>
<ion-tabs>
<ion-tab-bar slot="top">
<ion-tab-button tab="home">
<ion-router-outlet name="one"></ion-router-outlet>
<ion-label>Am besten bewertet</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-router-outlet name="one"></ion-router-outlet>
<ion-label>Trends</ion-label>
<ion-icon name="ice-cream"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="new">
<ion-router-outlet name="one"></ion-router-outlet>
<ion-label>Neueste</ion-label>
<ion-icon name="clock"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-header>
Any ideas?


The ion-tab-bar has display: flex; and height:100% in its styles which causes it not to render in chrome for whatever reason but you can get round it by adding style="display: contents;" to the ion-tab-bar element and it will displayed properly.
<ion-header>
<ion-tabs style="display: contents;">
<ion-tab-bar slot="top">
<ion-tab-button tab="home">
<ion-router-outlet name="one"></ion-router-outlet>
<ion-label>Am besten bewertet</ion-label>
<ion-icon name="heart"></ion-icon>
<ion-badge>6</ion-badge>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-router-outlet name="one"></ion-router-outlet>
<ion-label>Trends</ion-label>
<ion-icon name="ice-cream"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="new">
<ion-router-outlet name="one"></ion-router-outlet>
<ion-label>Neueste</ion-label>
<ion-icon name="clock"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-header>

Related

RouterLink not work in Ion-Button after adding ion-tabs but work fine without tabs , How can I solve this problem?

all working fine before adding ion-tab-button, I have buttons ionic with routing to another page
when i have added ion-tabs , the router link not work in button after click
where is my error ?! i need a solution .
this is my home.page.html
<ion-header translucent>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>SERVER STORE</ion-title>
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<ion-grid>
<ion-row>
<ion-col size="12">
<ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
(ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide *ngFor="let s of sliderOne.slidesItems">
<img src="assets/{{s.id}}.png">
</ion-slide>
</ion-slides>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/iptv-list']" >IPTV List </ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button expand="block" [routerLink]="['/sharing']" >Sharing List </ion-button>
</ion-col> </ion-row>
</ion-grid>
</ion-content>
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button >
<ion-icon name="speedometer"></ion-icon>
<ion-label>مباريات اليوم</ion-label>
</ion-tab-button>
<ion-tab-button >
<ion-icon name="play-circle"></ion-icon>
<ion-label>WATCH</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

i find the solution :
adding <ion-toolbar> as parent of ion-tabs
solve my problem

ion-split-page not showing side menu options in desktop mode while working in mobile mode

with ion-split-page added, I am not able to see my side menu options which are displaying properly in mobile view.
`
<ion-app>
<ion-split-pane contentId="main">
<!-- the side menu -->
<ion-menu side="start" menuId="m1" contentId="main">
<ion-header>
<ion-toolbar>
<ion-title>Wanderlust</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle menu="m1">
<ion-item lines="none" routerLink="/places/tabs/discover">
<ion-icon name="business" slot="start"></ion-icon>
<ion-label>Discover Places</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle menu="m1">
<ion-item lines="none" routerLink="/bookings">
<ion-icon name="checkbox-outline" slot="start"></ion-icon>
<ion-label>Your Bookings</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle menu="m1">
<ion-item lines="none" (click)="onLogout()" button>
<ion-icon name="exit" slot="start"></ion-icon>
<ion-label>Logout</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- the main content -->
<ion-router-outlet id="main"></ion-router-outlet>
</ion-split-pane>
</ion-app>
`
Does anyone know how to solve this issue?

We need to add autoHide="false" attribute on ion-menu-toggle.
<ion-menu-toggle autoHide="false">

Icon right on navbar don't work on ios as expected

Example on android/Browser
Works Fine on Android
Example On Ios
Not work as well
page.html
<ion-header [scrollHide]="headerScrollConfig" [scrollContent]="pageContent" >
<ion-navbar color="ticket-blue-rainbow" >
<ion-row>
<ion-title> {{ evento.descricao }}</ion-title>
<ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
<ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
<ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
</ion-row>
</ion-navbar>
</ion-header>
page.scss
.padding-icon {
padding-right: 15px;
font-size: 20px;
}

To overcome above issue you need to use below option with <ion-buttons> tag
<ion-buttons right>
<ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right
(click)="likeEvento()"></ion-icon>
</ion-buttons>
It will work and show your buttons on right side.

<ion-header>
<ion-navbar>
<ion-title> {{ evento.descricao }}</ion-title>
<ion-buttons right>
<ion-icon class="padding-icon" name="thumbs-up" color="light" item-right icon-right (click)="likeEvento()"></ion-icon>
<ion-icon class="padding-icon" name="ios-heart" item-right color="danger" (click)="onClickFavorit()"></ion-icon>
<ion-icon class="padding-icon" name="share" item-right (click)="onClickOpenModal()" color="light" style="padding-right: 10px !important;"></ion-icon>
</ion-buttons>
</ion-navbar>
</ion-header>

I don’t no if this method is the most correctly, but in this situation i use this class on ios
.ios {
page-event
{
.padding-ios{
padding-left:70%!important;
}
}
}
and on html i used
<ion-buttons right class="padding-ios">
</ion-buttons>

Ionic2: Icon inside Menu-Button is cut

I importet an example app (menu) and added a button with icon & text to the menu:
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-divider></ion-item-divider>
<button ion-item icon-left (click)="logout()">
<ion-icon name="log-out"></ion-icon>
Logout
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>
Sadly, this results in a not fully shown Icon (I test my app in Chrome)

you have to use the attribute item-left at ion-icon
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item-divider></ion-item-divider>
<button ion-item icon-left (click)="logout()">
<ion-icon item-left name="log-out"></ion-icon>
Logout
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>

Dynamic button in navbar not displaying correct

I'm having trouble with dynamic button in navbar. Here's the code:
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{action.name}}</ion-title>
<ion-buttons end>
<button *ngIf="view.searchable">
<ion-icon name="search"></ion-icon>
</button>
<button *ngIf="view.creatable">
<ion-icon name="create"></ion-icon>
</button>
<button (click)="showMenu($event)">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Output:
Please help. Thanks!

For some reason, the *ngIfis causing that issue (you can try by removing it, and the button is properly displayed). In order to solve it, you can change it like this:
<ion-header>
<ion-navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{action.name}}</ion-title>
<ion-buttons *ngIf="view.searchable" end>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons *ngIf="view.creatable" end>
<button>
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button (click)="showMenu($event)">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
Notice that I bind the *ngIfto the ion-buttons element instead of the button directly. Please take a look at this working plunker.