Modal .has-tabs when @media > 680px


Using the v1.0.0
When I call a modal on a screen larger than 680px, it resizes correctly but also adds an undesired .has-tabs class, leaving the bottom 50px of the modal blank.

Is this an issue or did I miss something? I tried setting the ion-content has-tabs to false but it doesn’t work.

Thanks for your great work @ionic team! Such a beautiful product!


Can you setup a CodePen sample of that?

Does it do it here :

Is this device only? I don’t see it happening in Chrome.


Happens too (Chrome / Firefox)

This is my modal content:

<div class="modal" >
    <header class="bar bar-header bar-stable">
        <h1 class="title">Set Title and description</h1>

    <ion-content class="has-header  padding">

        <div class="list">
            <label class="item item-input item-divider" style="margin-bottom: 10px;">
                <input type="text" ng-model="cache.title" placeholder="Title" style="color: #0811F7;">
            <ion-radio ng-repeat="item in group.mGroupItemSampleList | unique: 'mTitle'" 
                {{ item.mTitle }}
            <label class="item item-input item-divider" style="margin-top: 10px;">
                <textarea ng-model="cache.description" placeholder="Description" style="color: #0811F7;"></textarea>

        <button class="button button-block button-positive" ng-click="applyModal(modes[3])">Apply</button>
        <button class="button button-block button-dark" ng-click="hideModal(modes[3])">Cancel</button>



I’m not able to produce this in the Beta or Nightly using the “Getting Started” with ionic start myApp tabs and creating a local app.

I even copied in your exact Modal code from above and added some data to make the modal need to scroll.

Can you give me a more complete example so I can try it?