Checkbox multi column alignment

[totalstranger]

I have a check box with let's say 20 elements. I would like to have it
align as 4 columns, 5 rows. Without using a table and using
understandable CSS is there any way to make the check boxes align as I
would like?

I've been playing with the following selector in my attempts to get at
the text portion: input[type="checkbox"] + * {width:180px;}
So far my attempts have produced weirdness in FF and nothing occurs in IE7.

Although beyond the scope of this Newsgroup, when a span is placed
around each checkbox the following Javascript does cause the elements to
align in IE7, but not FF or Opera
<span><INPUT TYPE='checkbox' NAME='Countries[]' VALUE='US' >United
States</span>

var Boxes = document.getEle mentsByName("Co untries[]")
for(i=0; i<Boxes.length ; i++)
{
Boxes[i].parentNode.sty le.width = 180 + "px"
}
Thank you

[Ben C]

On 2007-03-30, totalstranger <to***********@ not.yahoo.netwr ote:

I have a check box with let's say 20 elements. I would like to have it
align as 4 columns, 5 rows. Without using a table and using
understandable CSS is there any way to make the check boxes align as I
would like?

I've been playing with the following selector in my attempts to get at
the text portion: input[type="checkbox"] + * {width:180px;}
So far my attempts have produced weirdness in FF and nothing occurs in IE7.

The recommended default stylesheet for CSS 2.1 says input should be
display: inline-block, which neither FF nor IE7 support.

You might be best to float them, or put them in containers which you
float and set width and height on. So long as you set all the containers
to the same heights they'll flow much like inline blocks.

[Jukka K. Korpela]

Scripsit Ben C:

The recommended default stylesheet for CSS 2.1 says input should be
display: inline-block, which neither FF nor IE7 support.

IE has had limited support to display: inline-block since IE 5.5.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Jukka K. Korpela]

Scripsit totalstranger:

I have a check box with let's say 20 elements.

You can't. A checkbox is a single element. You should have posted the URL
for many reasons, including the fact that it might give us a hint of what
you have really got.

I would like to have it
align as 4 columns, 5 rows.

Align? It seems that you would like to put them into a table. Why? Oh, never
mind. Just _don't_.

Without using a table and using
understandable CSS is there any way to make the check boxes align as I
would like?

Just the textboxes? With no labels? How would that be useable?

<span><INPUT TYPE='checkbox' NAME='Countries[]' VALUE='US' >United
States</span>

So you _do_ have some labels, just with inadequate markup.

Trying to guess what you _really_ want, I'd suggest markup like

<label><INPUT TYPE='checkbox' NAME='Countries[]' VALUE='US' >United
States</label>

with a style sheet like

label { display: block; float: left; width: 9em;}

You need to make a guess on a sufficiently large value for the width
property, based on an estimate of the length of the longest label. Do not
proceed before you understand why it would be all wrong to set the width in
pixels.

Anyway, this is not _useful_. It might be barely reasonable for 20
countries, but not for 200 countries. The friendly way to prompt for country
is a text input field where the user can type a name or a two- or
three-letter country code. The author needs to take care of the boring work
of finding or writing a server-side script that checks the country name and
code (and prompts again when needed), instead of forcing to user to do
boring lookup work.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2007-03-30, Jukka K. Korpela <jk******@cs.tu t.fiwrote:

Scripsit Ben C:

>The recommended default stylesheet for CSS 2.1 says input should be
display: inline-block, which neither FF nor IE7 support.

IE has had limited support to display: inline-block since IE 5.5.

I'm not sure I buy the idea that there can be degrees of support for
inline-block. It's well defined by CSS 2.1 and you either support it or
you don't.

[Jukka K. Korpela]

Scripsit Ben C:

I'm not sure I buy the idea that there can be degrees of support for
inline-block. It's well defined by CSS 2.1 and you either support it
or you don't.

You could support a CSS feature every other day, or for pages containing the
string "42", or (most commonly) most of the time, so that it usually works
but sometimes doesn't.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Ben C]

On 2007-03-30, Jukka K. Korpela <jk******@cs.tu t.fiwrote:

Scripsit Ben C:

>I'm not sure I buy the idea that there can be degrees of support for
inline-block. It's well defined by CSS 2.1 and you either support it
or you don't.

You could support a CSS feature every other day, or for pages containing the
string "42", or (most commonly) most of the time, so that it usually works
but sometimes doesn't.

Has display:inline-block, as specified by CSS 2.1, ever worked on any or
any other day, even for a page containing the string "42", in any
version of IE, ever?

[totalstranger]

On or about 3/30/2007 2:01 PM, it came to pass that Jukka K. Korpela wrote:

Scripsit totalstranger:

>I have a check box with let's say 20 elements.

You can't. A checkbox is a single element. You should have posted the
URL for many reasons, including the fact that it might give us a hint of
what you have really got.

>I would like to have it
align as 4 columns, 5 rows.

Align? It seems that you would like to put them into a table. Why? Oh,
never mind. Just _don't_.

>Without using a table and using
understandab le CSS is there any way to make the check boxes align as I
would like?

Just the textboxes? With no labels? How would that be useable?

><span><INPUT TYPE='checkbox' NAME='Countries[]' VALUE='US' >United
States</span>

So you _do_ have some labels, just with inadequate markup.

Trying to guess what you _really_ want, I'd suggest markup like

<label><INPUT TYPE='checkbox' NAME='Countries[]' VALUE='US' >United
States</label>

with a style sheet like

label { display: block; float: left; width: 9em;}

You need to make a guess on a sufficiently large value for the width
property, based on an estimate of the length of the longest label. Do
not proceed before you understand why it would be all wrong to set the
width in pixels.

Anyway, this is not _useful_. It might be barely reasonable for 20
countries, but not for 200 countries. The friendly way to prompt for
country is a text input field where the user can type a name or a two-
or three-letter country code. The author needs to take care of the
boring work of finding or writing a server-side script that checks the
country name and code (and prompts again when needed), instead of
forcing to user to do boring lookup work.

Not sure why you say it's not useful, this works perfectly FF 2.0.0.3,
Opera9 and IE7--Big Thank you. As a bonus when a click is done on the
Checkbox text the field is selected or unselected respectively.

My issue with this form is that many countries, and many of their
respective states/provinces/regions/etc may be selected. This makes
(IMHO) an AJAX control a bit complex, and I can't justify the coding
time(mine) since this is a very low usage, administrative only form. I'm
going with way less than the full compliment of 244 countries defined at
http://www.iso.org/iso/en/prods-serv.../list-en1.html
so it should work. It will also work well for the 50 US states and the
13 Canadian provinces/territories, and whatever other jurisdictions I
have to deal with.

"Yeah you right" I need to do more reading on em vs px, also the html
label tag, and probably much more.

Thank you once again
Arn

[Jukka K. Korpela]

Scripsit totalstranger:

Not sure why you say it's not useful, this works perfectly FF 2.0.0.3,
Opera9 and IE7--Big Thank you. As a bonus when a click is done on the
Checkbox text the field is selected or unselected respectively.

It works technically, and the <labelmarkup indeed makes the checkboxes
toggleable by clicking on the text too. But "it" referred to the whole idea
of creating a large set of checkboxes. Actually I have assumed that you
actually meant to use _radio buttons_, to allow a "1 out of many" choice,
rather than checkboxes, which allow "any out of many" choices. Now that I
come to think of, if you _really_ need the latter, the checkboxes might make
sense after all, in some cases.

My issue with this form is that many countries, and many of their
respective states/provinces/regions/etc may be selected.

OK, I see. I was thinking about the much more common situation where a
single country (or state or province) is to be selected, e.g. the country
where the user lives. Authors often do such things with <selectelemen ts
with all the countries they ever heard of, which is bad, or with a similarly
large set of radio buttons, which is bad too, insted of simply letter the
user type "US" or "USA" or "United States", or something like that. For
multiple choices, text input approach works too, but in cases like yours,
the checkboxes are probably a better idea.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Jukka K. Korpela]

Sub titulo "Re: Checkbox multi column alignment"
cripsit Ben C:

Has display:inline-block, as specified by CSS 2.1, ever worked on any
or any other day, even for a page containing the string "42", in any
version of IE, ever?

Surely. The magic needed is not very magical in this case: you need to set
the width of the element. The main problem with display: inline-block on IE
is that the width incorrectly defaults to the available width.

This of course defeats much of the potential use, but display: inline-block
still partially works on IE. You can test this e.g. by using <spanmarkup
for some word in a paragraph and setting a width for it, and perhaps
background or border to make the width easier to see. IE will correctly
ignore the width setting, since <spanis by default an inline element. When
you set display: inline-block, the width starts working, as specified, and
the element still appears inline.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/