Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expander appears at the wrong place #43

Closed
roxteddy opened this issue Apr 1, 2016 · 9 comments
Closed

Expander appears at the wrong place #43

roxteddy opened this issue Apr 1, 2016 · 9 comments

Comments

@roxteddy
Copy link

roxteddy commented Apr 1, 2016

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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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
Copy link
Owner

Did you ever resolve this?

@Yurich84
Copy link

I had the same issue with jQuery < 1.8

@apansky
Copy link

apansky commented Sep 23, 2016

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

@orion3dgames
Copy link
Owner

orion3dgames commented Sep 23, 2016

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
Copy link

apansky commented Sep 24, 2016

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

@orion3dgames
Copy link
Owner

No worries, glad you like it :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants