site assistant - lining up checkboxes

[apple17]

does anyone have a good way to line up all the checkboxes that are generated for a field. I have fields with 10 checkboxes in some cases, and they just wrap.

Ideally, I'd like a couple columns of fields, but for now, I'll settle for 1 column

[Baloo]

use CSS to specify the width of the element that contains the checkboxes. They will wrap when they hit the end of the element

div.check-container{

	width: 100px;

}

a b c d e f g h i j k l

For more control add a second container around each checkbox

div.check-container{

	width: 100px;

}

div.box-container{

	width: 45px;

	float: left;

	clear: none;

}

a

b

c

d

e

f

g

h

i

j

k

l

[danabase]

I am having the same issue, and I did apply the suggestion here, and it almost worked. My values are of differing lengths, so sometimes it works and sometimes it does not work. Is there a way to have the web just insert a return after each value to make a column? here is my code:

div.check-container{

width: 80px;

}

<?php getInputChoices("checkbox", $layout->getValueList('language', $record->getRecordId()), $record->getField('staff_languages_desired', 0) , getFieldFormName('staff_languages_desired', 0, $record));?>

so my list ends up looking more or less like this:

x Spanish

x Mandarin

x Cantonese

x Tagalog

x

Vietnamese

x Korean

x Armenian

x Japanese

x Farsi x

German x

French

where the "x" is where the checkbox appears. This is my simplest values list, but I have others with lots of values of very differing lengths. Is there some way to make this look nice?

I am open to any suggestions - I have only been working with PHP for about 6 months, so I am sure my code is ugly - sorry.

[Baloo]

Use option 2 in my example above. You will need to play with the widths to get a single column. i.e. make check-container the width of box-container plus it's padding. You can also change box-container's clear property to both, but then you couldn't use the same style if you wanted multiple columns elsewhere

You could just throw in a

every time you want to force a return, but that's basically a hack. Aside from providing less control over the checkboxes, it isn't considered best practices

[Joel Shapiro]

Hi

I think using

tags is a fine -- and easy -- way to line up checkboxes. If you hard-code the width of a containing

then you might need to adjust it every time you've got wider or narrower values.

It looks like getInputChoices is something that the PHP Site Assistant creates (according to: ) If that is the case, you could try finding that function in fmview.php and adding the

tag there, like:

echo "$eachvalue

";

See if that helps.

-Joel

[Baloo]

I think using

tags is a fine -- and easy -- way to line up checkboxes.

I guess it depends on how you feel about coding to accepted standards vs. just throwing up whatever works.

If you hard-code the width of a containing

then you might need to adjust it every time you've got wider or narrower values.

Not if you do it correctly

If you're going to build web pages you really should check Zeldman's now 6 year old book on designing with web standards or at least read his overview

http://www.peachpit.com/articles/article.aspx?p=31947

(the same link from my last post)

[Joel Shapiro]

Hi Baloo

I don't want to get into a flame war.

I don't see anything in that peachpit link suggesting that we never use

tags. Yes, using an ordered or unordered list might be preferable if there are many checkboxes, but for people who use the PHP Site Assistant and may not know much HTML or CSS, I think that's an unnecessary complication.

In your second example with the check-container and box-container divs, the clean output breaks when longer text is displayed next to a checkbox (e.g. replace "a

[Baloo]

I don't see anything in that peachpit link suggesting that we never use

tags.

Avoid using deprecated HTML elements such as tags or meaningless elements like

to simulate a logical structure where none exists.

Prefer Structural Elements to Meaningless Junk

Because we've forgotten—or never knew—that HTML and XHTML elements are intended to convey structural meaning, many of us have acquired the habit of writing markup that contains no structure at all. For instance, many HTML wranglers will insert a list into their page by using markup like this:

item

another item

a third item

Consider using an ordered or unordered list instead:

• item
  
• another item
  
• a third item
  

"But

[*] gives me a bullet, and I don't want a bullet!" you might say. CSS makes no assumptions about the way elements are supposed to look. It waits for you to tell it how you want them to look. Turning off bullets is the least of what CSS can do. It can make a list look like ordinary text in a paragraph—or like a graphical navigation bar, complete with rollover effects.

Yes, using an ordered or unordered list might be preferable if there are many checkboxes, but for people who use the PHP Site Assistant and may not know much HTML or CSS, I think that's an unnecessary complication.

Which is why I mentioned it in my post, however it is a hack and is not the best way to manipulate white-space when you have a reasonable amount of control over the content. Like all hacks it will often be something you have to spend time fixing down the road.

My feeling is that if you're going to be responsible for web pages, you should learn HTML, CSS and best practices. Just because FMP makes it ridiculously simple to build a database do you think that new developers shouldn't bother themselves with relational theory?

In your second example with the check-container and box-container divs, the clean output breaks when longer text is displayed next to a checkbox (e.g. replace "a

" with "Vietnamese

[danabase]

Joel,

Your suggestion worked great - I created a unique function inserting the break as:

function getInputChoicesColOne($type, $valuelist, $fieldvalue, $fieldName) {

$selected = "";

$fieldValueArray = explode(" ", str_replace("n"," ", $fieldvalue));

foreach ($valuelist as $eachvalue) {

if (in_array(trim($eachvalue), $fieldValueArray)){

$selected = " checked";

}else{

$selected = "";

}

if ($type == "checkbox"){

echo "$eachvalue

";

}else{

echo "$eachvalue

";

}

}

}

and left the original function to be used in other places. This worked instantly and perfectly to align my values in one column.

Is there a way to create a similar function, but have the result be 2 or 3 columns? I am struggling with some very long checkboxes, and would like to make them look as nice as possible. This worked well for my one column of languages, but now I have some monsters which I would like to display in 2 or 3 columns. Any suggestions?

[Joel Shapiro]

Hi Danabase(?)

I don't use the PHP Site Assistant, but if I wanted to divide a long list of checkboxes into columns, I might do something like this (below).

I've used a hard-coded array of values in my example ($valueListArray), but this would normally be the valuelist you get from your database.

Also note that the $numberOfColumns variable is manually editable here, but you could calculate this dynamically through PHP.

I hope that gives you some ideas on how you could work this into your solution.

-Joel

// SET YOUR NUMBER OF COLUMNS, EITHER MANUALLY OR DYNAMICALLY (E.G. BASED ON TOTAL NUMBER OF VALUES)

$numberOfColumns = 3;





$valueListArray = array('Spanish', 'Mandarin', 'Cantonese', 'Tagalog', 'Vietnamese', 'Korean', 'Armenian', 'Japanese', 'Farsi', 'German', 'French');	



$numberOfValues = count($valueListArray);

$valuesPerColumn = ceil($numberOfValues / $numberOfColumns);





// START FILLING COLUMN 1

$currentColumn = 1;



// GO THROUGH ALL VALUES IN VALUELIST AND POPULATE $COLUMNS ARRAY

for ($i = 0; $i < $numberOfValues; $i++) { 

	

	// IF COLUMN ALREADY HAS RIGHT NUMBER OF VALUES, START NEXT COLUMN

	if ($i == ($currentColumn * $valuesPerColumn) ) { // e.g. if 3 == (1 * 3), make $currentColumn 2

		$currentColumn++;

	}

	

	// WITH EACH TRAVERSAL OF THE VALUELIST ARRAY, ADD THE CURRENT CHECKBOX TO THE CURRENT $COLUMN ARRAY VALUE

	$columns[$currentColumn] .= ''. $valueListArray[$i]. '

';

	

}





// NOW PRINT VALUES TO PAGE



// ECHO OUT EACH VALUE OF THE COLUMNS ARRAY IN ITS OWN 200PX-WIDE DIV

for ($i = 1; $i <= $numberOfColumns; $i++) { 

	echo '

'. $columns[$i]. '

'; } // CLEAR THE FLOAT:LEFT DIVS SO THE REST OF THE PAGE FALLS BELOW THE CHECKBOXES echo '

';

[JRock]

Joel--

Great Example, I get an error that says undefined offset, but still displays correctly. I'm pulling the valuelist from a table, would it be possible to see an example of the array syntax from a table. Here is what I have currently, works but can't get the checkboxes to line up.

$q= "select destination_type_id, destination_type from destination_type where active = 1";	



$r = mysqli_query ($dbc, $q) or trigger_error("Query: $qn

MySQL Error: " . mysqli_error($dbc));



$i = 1;

while($row = mysqli_fetch_array($r)) {

if ($i == 1){ 

echo "
";

// DISPLAYS 6 CHECKBOXES AND THEN NEWLINE

	} elseif ($i == 6){

$i = 0;

		}

echo " $row[1] ";

$i++;

}

mysqli_free_result($r);