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


ust 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.

Comments (30)

  1. Programmerman says:

    1) The control is wider than the text.

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

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

  3. Don Bailes says:

    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!

  4. john says:

    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.

  5. Leo Davidson says:

    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).

  6. Matt says:

    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.

  7. 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.

  8. Bobby H says:

    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.

  9. Maggie says:

    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.

  10. 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.

  11. Kunal says:

    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.

  12. Ewald says:

    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.

  13. Rory Becker says:

    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!?

  14. Martin says:

    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.

  15. Martin Brown says:

    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.

  16. arun.philip says:

    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

  17. K.C.Lin says:

    1. The text label extends to encompass the ‘x’

    2. Accessibility

  18. Mark Dykun says:

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

  19. Mark Sowul says:

    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).

  20. SteveO says:

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

  21. GregM says:

    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.

  22. small_mountain says:

    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.  

  23. Alessandro says:

    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

  24. ccatto says:

    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

  25. ArthurZ says:

    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.

  26. ArthurZ says:

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

  27. Micah says:

    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.

  28. szalap@hotmail.com says:

    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.

  29. David White says:

    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.

  30. 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.