Using ion-tabs inside ion-view

I have a view that I want to show multiple tabs inside of it.

<ion-view view-title="Cupons" class="cupomView">
    <ion-nav-buttons side="right">
        <button id="notification-icon" class="button button-icon button-clear" ng-class='{"ion-android-notifications": !notDisturb, "ion-android-notifications-off": notDisturb}' ng-click='toggleDoNotDisturb()'>
    <ion-tabs class="tabs-light tabs-icon-only">
        <ion-tab title="Home" icon-on="ion-ios-pricetag" icon-off="ion-ios-pricetag-outline" badge="3" badge-style="badge-assertive">
                <swipe-card ng-repeat="card in cards track by $index" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)" class="list card">
                        <div class="title item item-divider">
                        <div class="cards-stats">
                            <div class="top-stats">
                                <img ng-src="{{card.image}}" width="276" height="187">
                                <p class="card-discount">50% de desconto</p>
                            <div class="bottom-stats">
                                <div class="row">
                                    <div class="col">
                                        <p class="card-shopping"><i class="icon ion-ios-location-outline"></i> Botafogo Praia</p>
                                        <p class="card-floor"><i class="icon ion-ios-search"></i> 2ª andar</p>

                                    <div class="col">
                                        <p class="card-store "><i class="icon ion-ios-cart-outline"></i> Zappato</p>
                                        <p class="card-date"><i class="icon ion-ios-calendar-outline"></i> 20/12/2014</p>
                        <div class="button-bar item item-divider">
                            <button class="button button-clear button-positive btn-want" ng-click="goAway()">Eu quero!</button>
                            <button class="button button-clear button-positive btn-dont-want" ng-click="goAway()">Descartar</button>
        <ion-tab title="About" icon-on="ion-ios-navigate" icon-off="ion-ios-navigate-outline">
            <leaflet defaults="map.defaults" center=""></leaflet>

The first tab works fine but the second tab I cant click on it to drag the map.

Any ideia?

did u try disabling tap ??

<div data-tap-disabled="true">
    <div id="google-map"></div>

It didn’t work :frowning:

So you can’t click on the second tab at all? Or you just can’t drag the map once you click on it?

Hi brandy,

I can click the tab, the map shows up but I can’t drag or interact in any way with the map.

As you can see I’m using angular-leaflet (I don’t know if there’s any better alternative)


Maybe try wrapping it in an ion-content tag and putting the data-tap-disabled on that?

Using ion-content the map goes away.

<ion-tab title="About" icon-on="ion-ios-navigate" icon-off="ion-ios-navigate-outline">
    <ion-content data-tap-disabled="true">
        <leaflet defaults="map.defaults" center=""></leaflet>

It seems that ion-content is filling the screen but the map has no size (height).

When I do this

<ion-content data-tap-disabled="true" scroll="false">
    <leaflet defaults="map.defaults" center="" style="height: 100%"></leaflet>

The map shows up again but I still can’t interact with

I turned off Touch screen emulation on Chrome and the map started working with the default code.

Sorry for my mistake guys

No problem. :slight_smile: It could help someone in the future.

1 Like