Results 1 to 2 of 2

Thread: line up text in list/menu (drop down menu)

  1. #1
    Join Date
    Nov 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default line up text in list/menu (drop down menu)

    I have a feeling I know this answer to this, but thought I'd ask....

    I have an html list/menu (option, drop down menu)

    In there I have:
    first name last name, address city

    Is there anyway to make columns so that everything lines up instead of an S pattern when you pull it down...

    thx

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    I hope you mean that you want them centered. Anyways, to do that, put the style and script section from this demo in the head of your page. You will also need to set the width of the select element via its inline style, as shown, using ex as units. You can use whatever number works out for you: 30ex, 100ex, whatever:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>Centered Drop Downs - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    select, option {
    text-align:center;
    }
    </style>
    <script type="text/javascript">
    function centO(){
    if (!document.documentElement.filters)
    return;
    var o=document.getElementsByTagName('option')
    for (var i_tem = 0; i_tem < o.length; i_tem++)
    if (o[i_tem].text.length<parseInt(o[i_tem].parentNode.style.width, 10)){
    var l=parseInt(o[i_tem].parentNode.style.width, 10)-o[i_tem].text.length
    for (var j_tem = 0; j_tem < l; j_tem++)
    o[i_tem].innerHTML='&nbsp;'+o[i_tem].innerHTML
    }
    }
    onload=centO;
    </script>
    </head>
    <body>
    <select style="width:20ex;" name="">
    <option value="">hazgngtn
    <option value="">bfb
    <option value="">fbbnb
    <option value="">bzb
    <option value="">fjkmkmhfhjm
    <option value="">nbfz
    </select>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •