By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,835 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Checkbox multi column alignment

P: n/a
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.getElementsByName("Countries[]")
for(i=0; i<Boxes.length; i++)
{
Boxes[i].parentNode.style.width = 180 + "px"
}
Thank you
Mar 30 '07 #1
Share this Question
Share on Google+
11 Replies


P: n/a
On 2007-03-30, totalstranger <to***********@not.yahoo.netwrote:
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.
Mar 30 '07 #2

P: n/a
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/
Mar 30 '07 #3

P: n/a
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/

Mar 30 '07 #4

P: n/a
On 2007-03-30, Jukka K. Korpela <jk******@cs.tut.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.
Mar 30 '07 #5

P: n/a
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/

Mar 30 '07 #6

P: n/a
On 2007-03-30, Jukka K. Korpela <jk******@cs.tut.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?
Mar 30 '07 #7

P: n/a
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
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.
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
Mar 30 '07 #8

P: n/a
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 <selectelements
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/

Mar 31 '07 #9

P: n/a
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/

Mar 31 '07 #10

P: n/a
On 2007-03-31, Jukka K. Korpela <jk******@cs.tut.fiwrote:
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.
Maybe that would have been enough for the OP (not that I call it
"working"). But FF is still a problem. Now he could experiment with
-moz-inline-box, but better to stay on the beaten track I think and use
floats.
Mar 31 '07 #11

P: n/a
On or about 3/31/2007 1:46 AM, it came to pass that Jukka K. Korpela wrote:
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 <select>
elements 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.
For a 1 out of many I generally prefer select boxes, aka dropdowns. Most
readers/users simply don't understand how to use a multiple select box
while holding the CTRL key, and they are difficult to use when the
number of elements is very large. In this case I use an AJAX search
control pulling a subset of the data from the database for the select box.

(Back to the checkbox CSS issue)
Sometimes the checkbox does not show the way I expect in FF when an
unrelated bit of HTML is hidden using ECMAscript/Javascript. I have to
try this in IE and Opera.

This page establishes regional geographical editions. My focus at this
point is getting it to work so I can properly load a MySql table, then
use the table as part of my plan to fully internationalize my site.
After that I'll get back to the making this page look good.

Arn
http://www.arnb.org/Schedule.php
Mar 31 '07 #12

This discussion thread is closed

Replies have been disabled for this discussion.