Beta 14 - Android tab hide my list view

Hi,

I just tried ionic serve --lab and beta 14 at the same time! Very nice tool.

When testing my app to see the changes, I discovered that the Android tabs are now at the top. I have no issue with that (I know I also can change it to go back to bottom), but for some reason, it hides a part of my list view! See below

The <div class="list"> is within a directive. Do you think it explained the behavior?

If not, what is the trick to solve that issue?

Thanks

What the code look like for that view?
It sounds like ion-content isn’t getting the right classes.

But to make sure, it’d like to see the markup

  <ion-content>
    <ion-refresher on-refresh="doRefresh()"
                   pulling-text="Pull to refresh..."
                   refreshing-text="Refreshing!"
                   refreshing-icon="ion-loading-c">
    </ion-refresher>   
     
    <div class="list">
      <a ng-repeat="unit in units | orderBy: orderByFilter" ng-click="goToUnitDetail(unit)" class="item item-avatar item-icon-right">
<!--      <a ng-repeat="unit in units | orderBy: orderByFilter" ui-sref="unitView.details({ hw_id: unit.hw_id })" class="item item-avatar item-icon-right">        -->

        <img ng-src="{{ unit.icon }}" ng-class="{statusError: unit.status !== '0', statusOffline: unit.online === '0', statusInTest: isInTest(unit.status2)}">
        <h2>{{ unit.spuid }} - 0x{{ unit.hw_id | ToBaseNumber }}</h2>
        <h4>{{ unit.position }}</h4>
      </a>
    </div>
  </ion-content>
<ion-content class="has-header">
</ion-content>

siddhartha,

I just tried your suggestion and it did not work. :frowning:

Does the class “has-header” is within ionic?

yeah it is. Can you provide a codepen of your problem?

This will be a bit long. I won’t have time today to generate that. Talk to you later…

Hi siddhartha,

Sorry for the delay. Here is the Codepen. Don’t forget the issue is with Android, not for iphone. Also, I did not have the opportunity to verify if the issue on real phones. Only with ionic serve --lab

CodePen for Android issue

Same problem here with the ionic-starter-tabs project - works fine on iOS and in the browser, tabs placed in right under the nav-bar on Android. Just ran “ionic start myApp tabs”, didn’t change anything.
Since I’m completely new to ionic this is especially annoying, since I have no clue (yet) how to explicitly set the tabs to “bottom” for Android…

Hi,

I had the same problem and I could solve it adding <ion-view> inside <ion-tab>

Basically, with beta13 I had :

<ion-tabs>
  <ion-tab>
    <ion-content>
      bla bla bla
    </ion-content>
  </ion-tab>
</ion-tabs>

And now, in beta14 I have :

<ion-tabs>
  <ion-tab>
    <ion-view>
      <ion-content>
        bla bla bla
      </ion-content>
    </ion-view>
  </ion-tab>
</ion-tabs>

This is strange but it’s working.
Could you solve your problems ?

1 Like

Hi loicknuchel,

I tried to make something like you suggested, but I lost my content.

Like you can see in my codepen (http://codepen.io/icarus31/pen/VYjBzq?editors=101), I have something like:

<ion-tabs>
  <ion-tab>
    <ion-nav-view>
      here, each tab has <ion-view><ion-content>

    </ion-nav-view>
  </ion-tab>
</ion-tabs>


If I remove the <ion-nav-view> and keep only the <ion-view>, it does not work.

Any other suggestion?

Thanks

mhartington,

Did you have a chance to look at the codepen? Did you see anything wrong? Are you able to try the code with a real Android phone?

So essentially your entire setup was a mess.

This works much better and is much simpler

Hi mhartington,

I don’t see you using the directive that I was using in the view.units.html. It seems it screws things up when using the directive (unless I am not using it correctly?)

Would you mind to try those links? I based the codes with your new CodePen with the directive. You will see the result

The first one, the top of the directive is behind the nav-bar

See the Pen yygJJm by David (@icarus31) on CodePen.

The second one, I took off the “”

See the Pen yygJJm by David (@icarus31) on CodePen.

This one seems to work ok until you use the Android view

What is your thoughts about the issue?

Thanks

Hey Guys !

I’m facing the same problem. After I updated to Beta 14 the tabs are at the top on my samsung galaxy s2 no matter what I try. Even if I open the codepen @mhartington provided in the browser of the samsung the tabs are at the top.

P.s.: everything is normal if I’m opening it on an Iphone.

Does anyone know a solution for this ?

Thanks a lot

I just found the solution on my own :

You have to set the tabs position to ‘bottom’, since it’s set to top as default for android.
$ionicConfigProvider.tabs.position(‘bottom’);

Here’s the link to the doc page:
http://ionicframework.com/docs/api/provider/%24ionicConfigProvider/

I hope that this helps you.

1 Like

At compile time, the ion-content has a watch on it to detect if any headers, footers, or tabs are visible.
Since you placed it inside another directive, it misses the calls it’s looking for.

So a easy solution would be to
A) Don’t use the directive - Doesn’t seem to offer a big savings.
B) move the ion-content from the directive and into the view.

Hi mhartington,

Moving out the <ion-content> from the directive solved the issue.

Thanks

1 Like