Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Feb 2009
    Posts
    18
    Member #
    18405
    Hi I have a very simple problem that needs fixing.

    I have a form that has table elements inside it. One part of the table is centered and has a series of checkboxes with text next to each one

    <style>
    h3 {text-align:center}
    </style>
    ...........

    <form>
    <table>
    .......<td><h3>Sometext: <input checkbox/>word1 word2<input checkbox/>word3 word4......</h3></td>......</tables></form>

    The problem is that when it displays in the browser it breaks up the words that are supposed to explain a checkbox

    .................................................. .........[Checkbox]word1
    word2[NextCheckBox]word3 word4......

    This is confusing to the user. How do I ensure the browser displays a checkbox and its text all on one line?

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    HTML Code:
    <span style="white-space: nowrap">
        <input type="checkbox" name="whatever" value="whatever" />
        Word 1
    </span>
    <span style="white-space: nowrap">
        <input type="checkbox" name="whatever" value="whatever" />
        Word 2
    </span>
    <span style="white-space: nowrap">
        <input type="checkbox" name="whatever" value="whatever" />
        Word 3
    </span>

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Better yet:

    HTML Code:
    <label><input type="checkbox" name="whatever" value="whatever" /> Word 1</label>
    However many times. And then, in your stylesheet:

    Code:
    label
    {
        white-space: nowrap;
    }
    (Disclaimer: I haven't tested this to double-check that it works.)

    EDIT: As a bonus, this pattern lets you click `Word 1' to check the check box as well, increasing the effective hit area of the check box, thus making it more usable and more accessible.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com