search

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

Column breaks out #73

Open anniemaisonneuve opened 5 years ago

anniemaisonneuve commented 5 years ago

When I click the first item, it shifts the others on the same row down below the expanded part and if I click the ones below the expanded section they move back up to the first row as I click them.

Can you help me out, so it does not break out? Thank a lot

orion3dgames commented 5 years ago

hi there. the only reason it could do that, is that the css is not added, or is overwritten by your own css. please make sure these styles are correctly added: https://github.com/oriongunning/gridder/blob/master/dist/css/jquery.gridder.min.css

anniemaisonneuve commented 5 years ago

Hi, I have included the demo css, But because I am using card-group from bootstrap, with bootstrap grid: The float left on .gridder-show seems to not work with my layout Example:

orion3dgames commented 5 years ago

Hahhh. It will not work if you use bootstrap grid. You will have to do your own responsive css.

FIY, all the li should be display: inline-block; and the gridder should be display block;float:left;

I guess, I'll have to find a way to make it work with bootstrap columns one day.

On Wed, 29 May 2019 at 07:54, anniemaisonneuve notifications@github.com wrote:

Hi, I have included the demo css, But because I am using card-group from bootstrap, with bootstrap grid: The float left on .gridder-show seems to not work with my layout Example:

<li class="card card col-6 col-md-4 col-lg-3 col-xxl-2 gridder-list" ...

( in desktop : I have 4 column (col-lg-3), but when I click on one of them, all the next li wrap under the gridder-show content. Thanks for helping by the way

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/oriongunning/gridder/issues/73?email_source=notifications&email_token=ABGYDRFO6ZBXRZ62I5RQFQ3PXWSZFA5CNFSM4HQEXJ2KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWNRYAA#issuecomment-496704512, or mute the thread https://github.com/notifications/unsubscribe-auth/ABGYDRAESA2QIEQGAPQUYNDPXWSZFANCNFSM4HQEXJ2A .