Re: select statement question...

Discussion in 'HTML' started by Jukka K. Korpela, May 10, 2008.

  1. Scripsit dba:

    > Trying to use size parameter in select statement. Problem... it raises
    > the box from the line instead of lowering it.


    The select element is inline by default, and it participates in
    rendering as if it were a large letter. In particular, its lower edge
    sits on the baseline of text.

    > Select an area {box with multiple select items only showing one} then
    > select a {box with multiple select items only showing one}. Select
    > boxes line up with the text line.


    That's because the elements are vertically smaller than the line height,
    or just a little taller. (Actually, what matters is whether the element
    is taller than the distance from baseline to the upper edge of the line,
    as defined by its line height.)

    > However, when I use the size parameter to show two variables at a time
    > the box moves up on line instead of down one line. Is there a way to
    > reverse that and have the box "lower?" on line?


    To change this, you change the vertical-align property of the select
    elements.

    You can add the following to your CSS stylesheet:

    select { vertical-align: text-top; }

    > Any assistance will be appreciated.


    The best approach is to put one input item and its label on one line.
    This is good for clarity and for accessibility. Example:

    <div><label>Area: <select ...>...</select></label></div>

    You may still have the same problem in rendering, but the solution is
    the same. Besides, now you have the option of using a table, with labels
    in one column, input fields in another.

    Don't try to construct a sentences that contain input items. If
    explanations are needed, present them as such as text before the input
    items.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 10, 2008
    #1
    1. Advertising

  2. Scripsit dba:

    > Using a form to present database fields for selection. Have been
    > trying using radio buttons etc to get it so the user can select one
    > person from a multiple person presentation. Not have any success.


    Can you please post the URL of your attempt? The basic idea is that you
    just a have a set of <input type="radio" ...> elements with the same
    name="..." attribute. There are complications if you want to make things
    work smoothly and reliably, especially the initial selection problem
    (see http://www.cs.tut.fi/~jkorpela/forms/choices.html ), but apart from
    that, the following approach should work well:

    <div>Please select a person:</div>
    <div><label><input type="radio" name="person" value="John Doe">John
    Doe</label></div>
    <div><label><input type="radio" name="person" value="Jane Doe">Jane
    Doe</label></div>
    ...

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, May 11, 2008
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    3
    Views:
    790
  2. Jay McGavren
    Replies:
    11
    Views:
    1,113
    Alan Krueger
    Jan 16, 2006
  3. tedsuzman
    Replies:
    2
    Views:
    7,064
    Michel Claveau, résurectionné d'outre-bombe inform
    Jul 21, 2004
  4. Ted
    Replies:
    1
    Views:
    452
    Duncan Booth
    Jul 22, 2004
  5. palmiere
    Replies:
    1
    Views:
    388
    Erwin Moller
    Feb 9, 2004
Loading...

Share This Page