Beta 14 - Android tab hide my list view

icarus_31 · December 19, 2014, 12:25pm

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

mhartington · December 19, 2014, 3:27pm

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

icarus_31 · December 19, 2014, 4:18pm

  <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>

siddhartha · December 19, 2014, 4:27pm

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

icarus_31 · December 19, 2014, 5:30pm

siddhartha,

I just tried your suggestion and it did not work.

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

siddhartha · December 19, 2014, 5:32pm

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

icarus_31 · December 19, 2014, 6:58pm

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

icarus_31 · December 27, 2014, 7:17pm

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

tkem · December 30, 2014, 7:17am

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…

loicknuchel · January 6, 2015, 10:23pm

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 ?

icarus_31 · January 7, 2015, 1:03am

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

icarus_31 · January 7, 2015, 1:38am

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?

mhartington · January 7, 2015, 6:46pm

So essentially your entire setup was a mess.

This works much better and is much simpler

icarus_31 · January 8, 2015, 12:47am

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

tf1308 · January 8, 2015, 10:38am

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

tf1308 · January 8, 2015, 12:28pm

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.

mhartington · January 8, 2015, 7:14pm

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.

icarus_31 · January 9, 2015, 1:50am

Hi mhartington,

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

Thanks