Friday, May 14, 2010

Repeating and aligning elements using jQuery and CSS

Today I had a need to create a dynamic list of checkboxes, and I wanted them all aligned properly, so the results would look something like this:

image

The layout was simple with CSS, then I added some jQuery to simulate getting the checkbox items dynamically.

Example:


That example produces a list that adjusts appropriately when resized:

image image

2 comments:

Dave Haynes said...

I had a slight problem wrapping the UL with a DIV and setting the background color. No matter what I did, the background color of the list would not change, until I made this change:

.repeater { list-style-type: none; display: inline-block; margin: 0px; padding: 0px; }

"display: inline-block" seemed to be the magical missing piece, but the padding and margins were jacked up from browser to browser, so I set them all to 0.

This seems to work for me in IE8, IE8 in IE7 compatibility mode, FF3, and Chrome4. Not sure about IE6.

price per head service said...

Fantastic post.I like your article.Very informative post.