search

airbnb / infinity

UITableViews for the web (DEPRECATED)
http://airbnb.io/infinity/
Other
2.8k stars 281 forks source link

Problem with rendering inline-block elements & a grandpa container with defined height. #46

Open neoswf opened 10 years ago

neoswf commented 10 years ago

I`ve been trying to integrate infinity inside a defined scrolled area. My UI is a bunch of inline-block thumbnails (not floated). Grid Layout.

Infinity works perfect inside my page when it occupy the whole page width & height, and each element is block level, with simple DOM inside.

But when create a little more advanced UI, with grid interface, and an infinity area to scroll inside a container (ListView's height isn't defined. It's container does), then all gets wrong. Even more than that- If I give 100% to HTML & Body, infinity fails. it calculates wrong listView`s height.

How to solve this? Grid UI is a desired & a common one.

Demos:

PostScript: I noticed in the API Reference, that ListItem has width & Height properties. Same as ListView. I couldn't find how to implement it, Inside the build code itself, i haven't seen how to pass this properties to the object. Sorry if its obvious thing, and its possible to do that.

Will appreciate any help. Thanks.

neoswf commented 10 years ago

Actually right now I discovered my problem. 2 elements that messed up with my UI where actually - Overflow:Hidden for my Body,HTML, and Height:100% for a page container.

I have removed Overflow:Hidden, and Height from the page container (not ListView!) and all is fine.

'useElementScroll:true' and .scrollable classname did not assisted me, and prevented me from needing do this actions.

Now my UI is impacted, and I need to see how I`ll solve it.

neoswf commented 10 years ago

Maybe its a good idea to reopen this issue, since /useElementScroll: true/ did not worked as expected. Maybe its wrong implementation of mine, or maybe its a new issue.

caseybaggz commented 8 years ago

I'm still having this issue too. Body height set to initial and no overflow property exists. Additionally, no height set on the parent? ¯(ツ)/¯