Ion-list doesn't show up for some data, but will on resize

I’ve got a simple ion-list bound to data returned from a service. For most results, it displays immediately. For one set of data, it will not render in the app until I resize the window, then it shows immediately.

Hmm, not sure what could be causing this. Any chance you could throw this in a codepen or plnkr?

Yep - give me ten minutes.

The app is here:

After it gets your location, it will show a list of services. Try the first few. Then try Restaurants. It will not render, but if you resize Chrome, it shows up right away.

Hmm, seems that if you scroll around a bit it will appear too…

From look at the dev tools a bit, It seems that your structure is like this…

ion-head-bar
ion-content
  ion-nav-view

Is this correct?

If yes, then I think the structure may be off a bit.

try removing the ion-content wrapping the ion-nav-view, and move it into the ion-views. It seems that the scroll area isn’t update the way you have it.

ion-nav-bar
ion-nav-view

Then you child views

ion-view
  ion-content
    ion-list
      ion-item ng-repeat....

I spoke w/ Max Lynch on IRC and he found a fix. I was supposed to call $ionicScrollDelegate.resize();. As soon as I did, it worked.

Do you mind now if I change gears to the second thing you mentioned? My current structure is this:

<ion-pane>
  <ion-header-bar class="bar-positive">
    <h1 class="title">INeedIt</h1>
  </ion-header-bar>
  <ion-content>
	  <ion-nav-view></ion-nav-view>
  </ion-content>
</ion-pane>

Are you saying ion-content should be… inside ion-nav-view?

After all the rendering, yes it will be inside the nav-view.
Basically, the ion-content should only be a child an ion-view, not an ion-nav-view.

So I should use in my partials?

As an FYI, I did try that, and now my views aren’t properly padded. So that can’t be right (I mean I’m sure your right, but I’m obviously doing it wrong).

Ok, so it works with this in index.html:

  <ion-header-bar class="bar-positive">
    <h1 class="title">INeedIt</h1>
  </ion-header-bar>

  <ion-nav-view>
  </ion-nav-view>

and in my partials, I use

<ion-view>
   <ion-content>stuff</ion-content>
</ion-view>

So this works… but is it right? I feel like I guessed right but I want to understand more.

Correct this would the way to structure things. So a good way to think of it is that the ion-nav-view shouldn’t be a child element of anything (in most cases, see the side-menu example for when it should be)

Ion-view should be the main wrapper for you partials/templates.
To properly add some padding, you can add the class of padding to ion-content.

 <ion-content class="padding"></ion-content>

Thank you for the help. This makes some sense to me now.

1 Like

Glad to be able to help :smile:, I’ll try to be on IRC more so things like this can be resolved much quicker