Home › Forums › JavaScript › Grid layout via list items, need help auto-adjusting heights to match
- This topic is empty.
-
AuthorPosts
-
June 24, 2013 at 5:16 pm #45806
cmegown
MemberHi everyone, I know my question title isn’t very clear so let me explain:
I’ve got a relatively simple responsive grid system done via an unordered list where each <li> is an individual tile containing a document thumbnail and a document title. Everything is done and everything works as needed, but I’ve got a problem I cannot solve with my fledgling skills in javascript. Some document thumbnails are landscape and some are portrait, and some document titles are long while others are short. This uncertainty can lead to <li> tiles of varying height, which can lead to gaps between tiles and rows in the “grid” system.
What I would like to try to do, is loop through every <li> and grab the height of the tallest one, then apply to all other <li> so that they all match. Also, since this is responsive, I need to continue to check and reapply as the viewport resizes.
Like I said my JS skills are lacking, but where I work this tool would be pretty valuable and would be a good exercise to expand my skills.
Thanks!
June 24, 2013 at 5:23 pm #140145chrisburton
ParticipantWhy not just use masonry.js?
June 24, 2013 at 5:34 pm #140150cmegown
MemberMasonry is an option, but (from higher up the chain o’ command) the desired layout is square/even/equal/etc.
I think I could eventually convince them to use masonry, but this is as good an exercise in learning javascript as anything else anyway.
June 24, 2013 at 6:25 pm #140163TheDoc
MemberNo JS needed for what you want to do: http://codepen.io/ggilmore/pen/ae465adffef8a5a6c36b7f9ae1f3a78b
Good ol’ inline-block to the rescue.
June 25, 2013 at 11:07 am #140268cmegown
Member@CrocoDillon Thanks for the snippet! I’ll find some time today to give that a go and report back here with the results.
@TheDoc I tried a layout similar to that from the start, but something I forgot to originally mention is that each tile needs to be entirely clickable/tap-able. Although nicely grid-like and easy, the layout you put together leaves large gaps of dead-space. Thanks though :) you’ve had an answer for pretty much every single question I’ve ever posted on here…keep up the great work!June 25, 2013 at 11:09 am #140269TheDoc
MemberThere’s a simple fix to that, but I’m on my phone at the moment. I’ll post it when I get to my desk.
June 25, 2013 at 11:41 am #140188TheDoc
MemberI’m not entirely sure where the dead spaces were to begin with, but here’s an example that has links covering the entire box: http://codepen.io/ggilmore/pen/ae465adffef8a5a6c36b7f9ae1f3a78b
June 28, 2013 at 3:12 pm #140877cmegown
MemberSorry guys, got moved to a different project for a couple of days there so I had to put all of this on hold.
@CrocoDillon Your solution works perfectly! I had something similar to that, but was missing the height reset. You really saved my bacon today, and I appreciate the help!
@TheDoc Your pen, while not what I needed currently, actually helped me out with a different project of mine. So thank you for that as well! -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.