473,322 Members | 1,473 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Checkbox multi column alignment

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
11 16389
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
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: javaguy | last post by:
I have a data entry web application that is formatted heavily with tables. Having learned a bit of CSS, I'm hoping to rewrite this using <div> tags. But I have run into a formatting problem that...
1
by: Marcos MOS | last post by:
Hi all, How Can I build a DataGrid with a "checkbox column" for all rows? And after I'll need to know if that row's checkbox is checked or not... I know that the better way is "template"...
0
by: Jim Ptak via .NET 247 | last post by:
I am desperate for help. I am at a loss. I have a dataset with 4columns in it. The first column is an actual column from adatabase table. The last three columns are hard codded values of0. I am using...
0
by: mike | last post by:
Hi there: I've read an excellent "how to"-article by Microsoft (no. 306227) - partly cited cited at the end of this email). I have implemented the code related to the part "How to Add a...
10
by: Jennyfer J Barco | last post by:
Hello, I have a datagrid that brings some information from a query. I need to have a checkbox in each row so the user can select the rows he wants to reprint. Is it possible to have a checkbox...
2
by: Thomas A | last post by:
Hi ! I'm trying to use a datagrid with an checkbox column, I not shoure to get it work on several points I have got the rest of the data mapped to the grid but the checkbox doesnt work. 1....
4
by: magmo | last post by:
Hi I have created a windows form that hold a datagrid, that datagrid gets it values from a stored procedure. My problem is that I have added a checkbox to the datagrid and applied some style...
17
by: Mike Fellows | last post by:
im trying (unsucessfully) to add a checkbox column to my datagrid i basically have a datagrid that im populating from a dataset Me.DataGrid1.DataSource = ds.Tables(0) the datagrid then has 5...
4
by: Steve | last post by:
Hi all, I don't want to use the datagrid if I don't have to. Is there a way to setup a ListBox to have more than one checkbox column? I need something like this | Include || Set as...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.