Expander appears at the wrong place

orion3dgames / gridder

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

http://orion3dgames.github.io/gridder/

461 stars 130 forks source link

Expander appears at the wrong place #43

Closed roxteddy closed 7 years ago

roxteddy commented 8 years ago

Hi,

Sometimes expander appears at the bottom of the list instead of current place. This is happening with Chrome but not with Safari and Firefox.

Here's the page : http://preview.littleboxes.fr/index.php?page=films

2 ways to reproduce the bug :

click the loadmore button on the bottom of the list, then interact with a pic in the 1st row
reduce your window to get the mobile viewport then interact with the first pic (only after resizing, not if loading/refreshing when already at this size)

The DIV is placed at the good place in the HTML code but Chrome choose to draw it after all the LI elements. That technique of using a DIV between 2 LI of a UL feels like an undocumented feature. Am I wrong ?

orion3dgames commented 8 years ago

Hello,

Seems like it's a css issue... Solution is simple, remove the float on the .gridder-show. It is added by the bootstrap class .col-xs-12, so remove that class and you're good.

Make sense?

roxteddy commented 8 years ago

Thank you for your answer.

Actually both on your example and my site, if I disable 'float' on gridder-show (yes you got one in your .gridder-show too) and open a list element, following list elements of the same row appear below the expander.

screen shot 2016-04-11 at 10 29 02

orion3dgames commented 8 years ago

Hello. Yes you're right, we need a float:left; else it does the above layout. I can't remember fully, but I think I was talking about a float:none that was somewhere in your code.

Anyway I see it works fine on your website, looks very snappy.

Regards, Orion

orion3dgames commented 8 years ago

Did you ever resolve this?

Yurich84 commented 8 years ago

I had the same issue with jQuery < 1.8

apansky commented 7 years ago

Hey guys, any updates on this? Found some good way how to handle this with floats so it doesnt break the layout?

orion3dgames commented 7 years ago

Hello. The only way this will work is if every list item is "display:inline-block" and the expanding preview to be "display:block;float:left;". Only floats will not work because of how css works. I could of course use absolute positioning but i'ts not really necessary as you can already achieve any layout you want with the current version. :)

apansky commented 7 years ago

Yes i see know, figured it out and used inline-block grid, thanx for nice lib btw :)

orion3dgames commented 7 years ago

No worries, glad you like it :)