[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1404
  • Last Modified:

How to organize a large number of checkboxes into columns (using Twitter Bootstrap V3)

I have a large number of checkboxes ...

 				<div class="control-group">
					<label for="location" class="control-label">Location: </label>
					<div class="controls">
						<div class="input-append">
							<?php
							
							$tagsdb = explode(',',$_REQUEST['locations']);
							
							foreach ($GLOBALS['all_towns'] AS $tag) {
								$tagid = str_replace(' ', '_', $tag);
								if(in_array($tag, $tagsdb)) $checked = ' CHECKED'; else unset($checked);
								echo "<label class='inline' style='padding-right:8px;'><input type='checkbox' id='location__{$tagid}' name='location[]' value='$tag'{$checked}> $tag</label>";
							}
							?>
						</div>
					</div>
				</div>

Open in new window


What's the best way to automatically organize them into columns...
0
Mark
Asked:
Mark
  • 3
  • 2
1 Solution
 
RobOwner (Aidellio)Commented:
Add the "row" class to your outer <div>.

Add  the relevant column sizing  to each <label> element e.g.

http://jsbin.com/bicogu/1/edit?html,js,output

<div class="input-append row">
      <label class='inline' style='padding-right:8px;'><input type='checkbox' id='location__{$tagid}' name='location[]' value='$tag'>$tag</label>
...
</div>

Open in new window


I've added the class via script but you could easily do this as you're outputting the php

$(function() {
  // for testing, change to col-xs-[num] to see other configurations
  $('.inline').addClass('col-xs-4');
});

Open in new window


in php:
foreach ($GLOBALS['all_towns'] AS $tag) {
	$tagid = str_replace(' ', '_', $tag);
	if(in_array($tag, $tagsdb)) $checked = ' CHECKED'; else unset($checked);
	echo "<label class='inline col-xs-4' style='padding-right:8px;'><input type='checkbox' id='location__{$tagid}' name='location[]' value='$tag'{$checked}> $tag</label>";
}

Open in new window

0
 
MarkProgrammerAuthor Commented:
I will try this in the morning, thanks!
0
 
MarkProgrammerAuthor Commented:
WOW, works perfect, thanks a million
0
 
MarkProgrammerAuthor Commented:
Anyway to make it collapse into one row or two depending on the size of the screen? (on my phone it just bunches together into 3 columns and also some of the checkboxes break off from the labels line:

Example:

[]
My checkbox label
0
 
RobOwner (Aidellio)Commented:
Sure, just change the class to col-sm instead of xs
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now