Beta 14 - Android tab hide my list view

ionic-v1
1

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

image
ios Android.png806Ɨ725 86.7 KB

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

2

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

3 
  <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>
4 
<ion-content class="has-header">
</ion-content>
5

siddhartha,

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

Does the class ā€œhas-headerā€ is within ionic?

6

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

7

This will be a bit long. I wonā€™t have time today to generate that. Talk to you laterā€¦

8

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

9

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ā€¦

image
2014-12-30 06.59.48.png800Ɨ1280 105 KB

10

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
11

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

12

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?

13

So essentially your entire setup was a mess.

This works much better and is much simpler

14

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

15

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

16

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
17

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.

18

Hi mhartington,

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

Thanks

1 Like