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:
The layout was simple with CSS, then I added some jQuery to simulate getting the checkbox items dynamically.
Example:
<html>
<head>
<title>Simple repeater</title>
<style type="text/css">
.repeater { list-style-type: none; }
.repeater li { float: left; width: 150px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
var names = ["Tanya", "Julia", "Avery", "Dave", "Robert", "Howard", "Greg", "Scott"];
for (i = 0; i < names.length; i++)
{
$("#peopleCheckboxGroup")
.append("<li><input type='checkbox' />" + names[i] + "</li>")
}
});
</script>
</head>
<body>
<ul id="peopleCheckboxGroup" class="repeater"></ul>
</body>
</html>
That example produces a list that adjusts appropriately when resized:
2 comments:
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.
Fantastic post.I like your article.Very informative post.
Post a Comment