SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can i make a dorp-down list text centre aligned

    Hi all,

    I want to make the drop-down list text aligned centre.
    I need it urgently.

    Please help me out.

    regards

  2. #2
    SitePoint Evangelist anjanesh's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai
    Posts
    447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cannot using standard HTML control SELECT. Need to make your own control. Or try searching ASP.NET controls if you are using ASP.NET. You'll find many there.
    Anjanesh

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought this post was on another forum so have not found it again till now

    started working on this but as IE does not understand text-align for select boxes the font for IE must be mono space for IE for it to be correct

    The script is not finished I I doubt that I will but this is wwhat it is so far

    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title>Select Box Style</title>
    <
    style>
    selbx. { width:100px;font-Size:12px;background-Color:#FFCC66; }
    </style>


    <
    script language="JavaScript" type="text/javascript">
    <!--
    // Select Box Style (12-02-2005)
    // by Vic Phillips http://www.vicsjavascripts.org.uk

    // The style of Select Boxes would normally be established using CSS
    // However IE does not recognise TEXT-ALIGN:CENTER;
    // This text will allow text centering in IE browsers
    // and may be used as an alternative to CSS for common style attributes


    // Customise
    // if the attribute is to default use =null;
    var sbsAlign='center';                       // left, center, right(not IE), null = left align
    var sbsBackground='#FFFFCC';                 // back ground color
    var sbsColor='#996600';                      // text color
    var sbsFont='Helvetica, Arial, sans-serif;'// the font family
    var sbsSize=12;                              // the font size
    var sbsStyle='italic';                       // the font size
    var sbsWeight='bold';                        // the font size
    var sbsWidth=100;                            // width in px

    // No need to Change
    var sbsMax;
    var 
    sbsObj;

    if (!
    sbsAlign){ sbsAlign='left'; }
    sbsAlign=sbsAlign.toLowerCase();

    function 
    sbsSelect(sbsObj){
     for (
    sbs0=0;sbs0<sbsObj.length;sbs0++){
      if (
    sbsFont){ sbsObj[sbs0].style.fontFamily=sbsFont; }
      if (
    sbsSize){ sbsObj[sbs0].style.fontSize=sbsSize; }
      if (
    sbsStyle){ sbsObj[sbs0].style.fontStyle=sbsStyle; }
      if (
    sbsWeight){ sbsObj[sbs0].style.fontWeight=sbsWeight; }
      if (
    sbsColor){ sbsObj[sbs0].style.color=sbsColor; }
      if (
    sbsWidth){ sbsObj[sbs0].style.width=sbsWidth+'px'; }
      if (
    sbsBackground){ sbsObj[sbs0].style.backgroundColor=sbsBackground; }
      if (
    sbsSize&&sbsWidth){ sbsMax=sbsWidth/sbsSize; }
      if (
    sbsAlign){
       if (!
    sbsSize||!sbsWidth){
        
    sbsMax=0;
        for (
    sbs1=0;sbs1<sbsObj[sbs0].options.length;sbs1++){
         if (
    sbsObj[sbs0].options[sbs1].text.length>sbsMax){
          
    sbsMax=sbsObj[sbs0].options[sbs1].text.length;
         }
        }
       }
       for (
    sbs2=0;sbs2<sbsObj[sbs0].options.length;sbs2++){
        if (
    document.all&&sbsAlign=='center'){
         while (
    sbsObj[sbs0].options[sbs2].text.length<sbsMax){
          
    sbsObj[sbs0].options[sbs2].text=' '+sbsObj[sbs0].options[sbs2].text;
         }
        }
        else if (
    sbsAlign){
         
    sbsObj[sbs0].style.textAlign=sbsAlign;
        }
       }
      }
     }
    }

    //-->
    </script>

    </style>
    </head>

    <body onload="sbsSelect(document.getElementsByTagName('SELECT'));" >
    <form id="Examples" >
    <select size="1">
    <option value="tom">1</option>
    <option value="tom">12</option>
    <option value="tom">123</option>
    <option value="tom">1234</option>
    <option value="tom">12345</option>
    </select>
    <br>
    <select size="1">
    <option value="tom">ABCDEF</option>
    <option value="tom">ABC</option>
    <option value="tom">ABCDE</option>
    <option value="tom">A</option>
    <option value="tom">ABCD</option>
    <option value="tom">AB</option>
    </select>
    </form>
    (\u2003)
    <table width="500" cellpadding="0" cellspacing="0" border="1" style="text-Align:center;font-size:12px;" >
      <tr height="30" style="font-size:16px;font-weight:bold; ">
        <td colspan="4" >Demonstration Panel</td>
      </tr>
      <tr height="25" >
        <td width="25%">
         <select size="1" onchange="javascript:Demo(this);" >
         <option value="sbsAlign">Text Align</option>
         <option value="">null</option>
         <option value="center">center</option>
         <option value="left">left</option>
         <option value="right">right</option>
         </select>
        </td>
        <td width="25%">
         <select size="1" onchange="javascript:Demo(this);" >
         <option value="sbsBackground">Back Ground</option>
         <option value="">null</option>
         <option value="black">black</option>
         <option value="red">red</option>
         <option value="yellow">yellow</option>
         <option value="green">green</option>
         <option value="blue">blue</option>
         <option value="#FFCC66">#FFCC66</option>
         </select>
        </td>
        <td width="25%">
         <select size="1" onchange="javascript:Demo(this);" >
         <option value="sbsColor">Text Color</option>
         <option value="">null</option>
         <option value="black">black</option>
         <option value="white">white</option>
         <option value="red">red</option>
         <option value="yellow">yellow</option>
         <option value="green">green</option>
         <option value="blue">blue</option>
         <option value="#FFCC66">#FFCC66</option>
         </select>
        </td>
        <td width="25%">
         <select size="1" onchange="javascript:Demo(this);" >
         <option value="sbsFont">Font Family</option>
         <option value="">null</option>
         <option value="Helvetica, Arial, sans-serif;">Helvetica</option>
         <option value="Times, TimesNR, serif;">Times</option>
         <option value="Courier, 'Courier New', monospace;">Courier</option>
         </select>
        </td>
      </tr>
      <tr height="25" >
        <td width="25%">
         <select size="1" onchange="javascript:Demo(this);" >
         <option value="sbsSize">Font Size</option>
         <option value="10">10px</option>
         <option value="12">12px</option>
         <option value="14">14px</option>
         <option value="16">16px</option>
         <option value="18">18px</option>
         <option value="20">20px</option>
         </select>
        </td>
        <td width="25%">
         <select size="1" onchange="javascript:Demo(this);" >
         <option value="sbsStyle">Font Style</option>
         <option value="normal">normal</option>
         <option value="italic">italic</option>
         <option value="oblique">oblique</option>
         </select>
        </td>
        <td width="25%">
         <select size="1" onchange="javascript:Demo(this);" >
         <option value="sbsWeight">Font Weight</option>
         <option value="normal">normal</option>
         <option value="bold">bold</option>
         <option value="400">400</option>
         <option value="600">600</option>
         <option value="800">800</option>
         </select>
        </td>
        <td width="25%">
         <select size="1" onchange="javascript:Demo(this);" >
         <option value="sbsWidth">Width</option>
         <option value="50">50px</option>
         <option value="75">75px</option>
         <option value="100">100px</option>
         <option value="125">125px</option>
         <option value="150">150px</option>
         <option value="200">200px</option>
         <option value="300">300px</option>
         </select>
        </td>
      </tr>
      <tr height="25" >
        <td colspan="4" >
        <input type="button" name="" value="Change Select Box Style"
        style="font-size:12px;background-color:#FFCC66;"
        >
        </td>
      </tr>
    </table>
    <script language="JavaScript" type="text/javascript">
    <!--

    function Reset(){
     Obj=document.getElementsByTagName('SELECT')
     Obj[0].options[0].text='1';
     Obj[0].options[1].text='12';
     Obj[0].options[2].text='123';
     Obj[0].options[3].text='1234';
     Obj[0].options[4].text='12345';
    // Obj[0].options[4].text='12345';
     Obj[1].options[0].text='ABCDEF';
     Obj[1].options[1].text='ABC';
     Obj[1].options[2].text='ABCDE';
     Obj[1].options[3].text='A';
     Obj[1].options[4].text='ABCD';
     Obj[1].options[5].text='AB';
    }



    function Demo(obj){
     if (obj.selectedIndex<1){ return; }
     Reset();
     if (obj.options[0].value=='sbsAlign'){
      sbsAlign=obj.options[obj.selectedIndex].value;
     }
     if (obj.options[0].value=='sbsBackground'){
      sbsBackground=obj.options[obj.selectedIndex].value;
     }
     if (obj.options[0].value=='sbsColor'){
      sbsColor=obj.options[obj.selectedIndex].value;
     }
     if (obj.options[0].value=='sbsFont'){
      sbsFont=obj.options[obj.selectedIndex].value;
     }
     if (obj.options[0].value=='sbsSize'){
      sbsSize=obj.options[obj.selectedIndex].value;
     }
     if (obj.options[0].value=='sbsStyle'){
      sbsStyle=obj.options[obj.selectedIndex].value;
     }
     if (obj.options[0].value=='sbsWeight'){
      sbsWeight=obj.options[obj.selectedIndex].value;
     }
     if (obj.options[0].value=='sbsWidth'){
      sbsWidth=obj.options[obj.selectedIndex].value;
     }
     sbsSelect(document.getElementById('Examples').getElementsByTagName('SELECT'));
    }

    //-->
    </script>
    </body>

    </html> 
    better to use css or see


    http://www.vicsjavascripts.org.uk/DogTag/DogTag.htm

    which does more with textbox spacing

  4. #4
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks

    Its is working..

    Once again thanks


    jsissiberia


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
  •