Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Cheryl Oliver
Cheryl Oliver
21,676 Points

Search bar messing up layout when filtering

Hi guys, Got a problem with my javascript. I have set a lightbox photo gallery with a search bar. The search bar has live filtering but when I start inputting text it the whole layout gets messed up. I have figured out that the images are being hidden but not the container of the image so thats whats causing the problem but I dont know how to fix it. Please check my code on github: https://github.com/Xena123/Photo-Gallery Thanks so much. Cheryl

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

It seems like it's working, but I may not have replicated the environment exactly.

You could make a workspace here to demonstrate the issue, and then use the snapshot function in the workspace and provide the link to it.

1 Answer

rydavim
rydavim
18,814 Points

I think I see what you mean. The containing li element is still taking up space even when the img is hidden, and so is offsetting the visible images. Could you try just hiding the entire li element instead?

$(img.element).closest('li')[0].style.display = index === -1 ? 'none' : '';

That seemed to fix the problem for me, but let me know if you run into trouble. Happy coding! :)

Cheryl Oliver
Cheryl Oliver
21,676 Points

Ah man, you're the best!!! Thank you, that did it.