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

6 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.

Anonymous said...

[URL=http://imgwebsearch.com/35357/link/casino%20online/2_casinoss.html][IMG]http://imgwebsearch.com/35357/img0/casino%20online/2_casinoss.png[/IMG][/URL]

Anonymous said...

[URL=http://imgwebsearch.com/35357/link/buy%20cialis/7_mycialis.html][IMG]http://imgwebsearch.com/35357/img0/buy%20cialis/7_mycialis.png[/IMG][/URL]

Anonymous said...

[URL=http://imgwebsearch.com/35357/link/casino%20online/8_style_casino.html][IMG]http://imgwebsearch.com/35357/img0/casino%20online/8_style_casino.png[/IMG][/URL]

Anonymous said...

[URL=http://imgwebsearch.com/35357/link/buy%20cialis/12_mycialis.html][IMG]http://imgwebsearch.com/35357/img0/buy%20cialis/12_mycialis.png[/IMG][/URL]

price per head service said...

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