Using ion-tabs inside ion-view

1

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()'>
        </button>
    </ion-nav-buttons>
    <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-cards>
                <swipe-card ng-repeat="card in cards track by $index" on-destroy="cardDestroyed($index)" on-card-swipe="cardSwiped($index)" class="list card">
                    <div>
                        <div class="title item item-divider">
                            {{card.title}}
                        </div>
                        <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>
                            <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>
                                    <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>
                                </div>
                            </div>
                        </div>
                        <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>
                        </div>
                    </div>
                </swipe-card>
            </swipe-cards>
        </ion-tab>
        <ion-tab title="About" icon-on="ion-ios-navigate" icon-off="ion-ios-navigate-outline">
            <leaflet defaults="map.defaults" center="map.center"></leaflet>
        </ion-tab>
    </ion-tabs>
</ion-view>

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

Any ideia?

2

did u try disabling tap ??

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

It didn’t work :frowning:

4

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

5

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)

Att,

6

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

7

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="map.center"></leaflet>
    </ion-content>
</ion-tab>

image
Screen Shot 2015-04-23 at 6.29.14 PM.png726×1298 104 KB

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="map.center" style="height: 100%"></leaflet>
</ion-content>

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

8

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

Sorry for my mistake guys

9

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

1 Like