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


#1

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.


#2

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


#3

Yep - give me ten minutes.


#4

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.


#5

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

#6

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?


#7

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.


#8

So I should use in my partials?


#9

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


#10

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.


#11

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>

#12

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


#13

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