Welcome to MSDN Blogs Sign in | Join | Help

Sara Ford's Weblog

My adventures embracing open source on CodePlex and at Microsoft

News

    • Did you know... All author proceeds go directly to sending Hurricane Katrina survivors to college.

      Microsoft Visual Studio Tips book

      Recent Entries

POP QUIZ: Why can you click beyond the text of a checkbox and still click the checkbox?

Just like last time we did a pop quiz, you can leave your answer as a comment, and i'll approve all comments the next afternoon. 

image

In the picture above, you see 'x' marks the spot.  If you click the mouse pointer there, it will toggle the state of the checkbox.  Why?

Now there are two layers of answers:

  1. There's the technical answer.
  2. There's the reason for the technical answer.

I'll answer both tomorrow.  Update:  Here's the answer.

Posted: Monday, February 18, 2008 1:00 PM by saraford

Comments

Programmerman said:

1) The control is wider than the text.

2) As near as I can tell, this allows for easier and more predictable localization.

# February 18, 2008 4:16 PM

Eber Irigoyen said:

there's a fixed width (on the checkbox+text) for localization purposes?

# February 18, 2008 6:58 PM

Don Bailes said:

The space occupied by the CheckBox object is not limited to the space for the check and the Text property of the object.  Obviously, in this case, the Size of the object includes the point where X marks the spot.  

Thank you for all the great discussion.  I'll bet you are the entertainer in your team!

# February 18, 2008 7:13 PM

john said:

Depends on how big the label of the check box is.  If the label spans the width then clicking anywhere on the label will set the check box. But if the box is set to autosize or smaller then the x you marked then no the check will not occur.

# February 18, 2008 7:50 PM

Leo Davidson said:

I've always assumed it's space left over for labels which may be longer when translated into other languages, combined with GUI code which doesn't bother to resize controls to fit their text and fonts (which is most GUI code as you have to do a little digging to find the proper rules for how big controls are, then do all the dialog unit conversions, and so on).

# February 18, 2008 8:01 PM

Matt said:

Even though no text appears where the X is located, the checkbox control itself extents out that far. My guess is all of the checkboxes in the column are the same size, regardless of the amount of text contained within them.

# February 18, 2008 8:33 PM

Darren Stokes said:

1.  Because the label for the checkbox extends to the edge of the form.  Well, actually matches up with the edge of the buttons above.

2.  The extra room allows for more room for languages other than english.

# February 18, 2008 8:55 PM

Bobby H said:

1) Because the textbox portion (in design mode) of the check box extends out to at least where the X is.

2) Clicking on the text box portion of a check box control toggles the check box.

# February 18, 2008 9:23 PM

Maggie said:

The checkbox includes the text and may extend well past the text.  I'm sure this is because people have dificulty using a mouse on a small space but it has caused me to unintentionally change a setting.

# February 18, 2008 9:45 PM

Mohammad Azam said:

Hi,

It is for the blind people so when they tab their way to the checkbox the text in the label control is read out load.

# February 18, 2008 11:33 PM

Kunal said:

It is because it is still a part of the same check box control. They are not individual control and thus click on a part of it fires event of the checkbox control.

# February 19, 2008 2:10 AM

Ewald said:

Because the width label of the checkbox is extended to the end of the end of the page.

Reason:

1) People are not very good 'clickers'

2) Men aren't good at aiming :)

3) You want to check the text, so toggle the checkbox when clicking on the text seems logical for non-developers.

# February 19, 2008 2:11 AM

Rory Becker said:

1.> Because the physical label part of the checkbox extends further than the text it contains and the label being clicked also toggles the checkbox for usability reasons.(Possibly the right side of said check box is anchored to the right side of it's container.)

2.> Because you need it to for foreign language support as some languages take more space to say approximately the same thing.

Howzat!?

# February 19, 2008 3:47 AM

Martin said:

I suppose the control is wider than the visible text and the reason probably is localization, i.e. to fit translated text which often is longer.

# February 19, 2008 4:47 AM

Martin Brown said:

The technical answer is that the text fits in a windows box which is set to a width that is the same as the check boxes above and below. This extra space will also allow space for foreign names.

There is a usability reason for this too. If you are sliding the mouse down a column of checkboxes clicking on the ones you want, you don't want to have to move you mouse to the left for those options with a shorter name.

# February 19, 2008 4:47 AM

arun.philip said:

Technical answer: The check box control extends all the way to the right end of the form.

Reason for it: Localization. Strings in different languages will be of different lengths, so the check boxes are sized to a rather large size to accommodate most (all?) cases

# February 19, 2008 5:36 AM

K.C.Lin said:

1. The text label extends to encompass the 'x'

2. Accessibility

# February 19, 2008 6:27 AM

Mark Dykun said:

The control region for the textbox is aligned to the other checkbox controls. Ensuring that all of the checkboxes has a consistent click region.

# February 19, 2008 7:40 AM

Mark Sowul said:

The boundaries of the text actually go out much farther than the English text (for localization purposes) and of course you can click the label in order to toggle a checkbox (except for some crappy apps).

# February 19, 2008 9:07 AM

SteveO said:

It was designed by men who's aim at times isn't always perfect.

# February 19, 2008 9:28 AM

GregM said:

The person who made the dialog resource thought about I18n, and made all the checkboxes the width of the containing area to allow for the text size changing.  The control doesn't track the size of the text box, and so doesn't care whether the hit was on the text or not, just with the control's rectangle.

This also gives the user a bigger target to hit.

# February 19, 2008 9:40 AM

small_mountain said:

Well, if you're like us, you make your checkboxes wider than the actual text so that localizers have room to expand the text when translating.  

# February 19, 2008 10:17 AM

Alessandro said:

1. The size of the check box is bigger than the text

2. it's bigger to support translation to other languages where the text may become longer

# February 19, 2008 10:44 AM

ccatto said:

Hey Now Sarah,

I thnk the reason is that the check box pertains to the who label or section of text. I like the concept of the post.

Thx,

Catto

# February 19, 2008 11:02 AM

ArthurZ said:

Technically, this is because the caption of the checkbox is part of this control.

If a developer trimmed the caption and used a label control beside it, only clicking on the actual check box will make the value set.

# February 19, 2008 11:44 AM

ArthurZ said:

This is because the caption is an integral part of the checkbox control in this case.

# February 19, 2008 11:45 AM

Micah said:

I assuming because the checkbox horizontalalignment is set to stretch or the anchor/dock property is set thus causing the bounding box to strecht across the containing panel.

# February 19, 2008 4:42 PM

pszalapski said:

I would guess

1.  Because the control label extends wider than the text, and clicking on the control label is the same as clicking on the checkbox itself.

2.  Why not?  That space wasn't used for anything anyway.

# February 19, 2008 5:42 PM

David White said:

Technical answer: because the dimensions of the checkbox label extend beyond the end of the text (to whatever the developer set them).

Reason: so that the developer has control over the size of the "clickable" area (eg to exactly fill a grid cell), independent of the size of the checkbox text.

# February 19, 2008 5:49 PM

Peter Tizzard said:

In one word Accessibility.

When an HTML label element is associated with a form element by using the "for" attribute, the form elements clickable area extends to the label. It also adds some semantics to the markup, essentially giving a meaningful description to what would have been an isolated checkbox.

It is good for assistive techology and also helps able bodied users by exposing a larger clickable area.

In Visual Studio when you create an ASP label control  look in the properties window for "AssociatedControlID" and set this to the ID of the form element. ASP.NET will then create the necessary HTML. Of course it works just as well in bog standard HTML.

The clickable area of the label can then be changed further with a bit of CSS changing its display to a block level element and giving it a width for instance.

# February 20, 2008 3:50 AM
New Comments to this post are disabled
Page view tracker