 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / March 2007Checkbox 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 > 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 [quoted text clipped - 4 lines] > 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. 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.  SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > 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. 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. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit Ben C: > [quoted text clipped - 5 lines] > 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? 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 <span> markup 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 <span> is by default an inline element. When you set display: inline-block, the width starts working, as specified, and the element still appears inline. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Sub titulo "Re: Checkbox multi column alignment" > cripsit Ben C: [quoted text clipped - 14 lines] > 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. 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. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit totalstranger: > [quoted text clipped - 42 lines] > 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-services/iso3166ma/02iso-3166-code-lists/list-en 1.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 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 <label> markup 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. SignatureJukka K. Korpela ("Yucca") http://www.cs.tut.fi/~jkorpela/ > Scripsit totalstranger: > [quoted text clipped - 21 lines] > 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 |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.