search

pedroabreu / ion-gallery

Ionic gallery directive
MIT License
124 stars 61 forks source link

Not rendering correctly when in ng-hide #64

Closed turbobuilt closed 8 years ago

turbobuilt commented 8 years ago

Hi,

I have several tabs in my application that are managed through ng-show/hide. When using ng-if this is no problem, but I need to use ng-show/hide because it takes to long to reload each page with ng-if.

So the problem: all three tabs load at first, including the one that contains ion-gallery. Ion gallery loads all images with 0 height. If I scroll down using infinite-scroll the new ones have proper height. So so for some reason it just doesn't calculate height correctly when the view is obscured by ng-hide.

Any idea how to fix that?

pedroabreu commented 8 years ago

As I recall, ng-show/hide, works by rendering the element and toggles the display of it with display hide on/off. By doing that, the directive is trigerred to render but because it has display none, there's no height defined. I think this is what's causing the height 0 (And working properly with infinite scroll).

Try passing the scope items down the directive on tab click (Or when ng-show is enabled). It's the solution I can think of from the top of my head... Although it might still cause issues with the time it takes to render (Worth a shot though)

turbobuilt commented 8 years ago

Hi!

I ended up messing with the CSS and set the columns and image containers to display:inline-block and then had them float left. I'm not sure it works in every scenario, but it fixed it in mine.

On May 26, 2016, at 1:31 PM, Pedro Abreu notifications@github.com wrote:

As I recall, ng-show/hide, works by rendering the element and toggles the display of it with display hide on/off. By doing that, the directive is trigerred to render but because it has display none, there's no height defined. I think this is what's causing the height 0 (And working properly with infinite scroll).

Try passing the scope items down the directive on tab click (Or when ng-show is enabled). It's the solution I can think of from the top of my head... Although it might still cause issues with the time it takes to render (Worth a shot though)

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHub