ansaurus

Question

How to achieve two different alignments inside a html option tag?

Answer 1

+6 A:

I faced this issue once and what I did was format the text in a monospaced font and fill the middle with spaces to seperate the text and make each row an even number of characters.

tonyriddle 2009-01-27 17:48:06

+1 Beat me to it. :-)

Tomalak 2009-01-27 17:50:41

I do this as well. Most server-side languages provide a printf() type function that can be used to generate the correct number of spaces for each option.

tj111 2009-01-27 17:53:57

AFAIK this is the only thing which works

annakata 2009-01-27 18:05:27

I wish there were something better, but this is all I could find.

tonyriddle 2009-01-27 18:28:06

Answer 2

A:

Try something like this

select {width:100px;}
.name  {float:left;}
.code  {float:right;}

Birk 2009-01-27 17:48:35

This one does not work

Sergio del Amo 2009-01-27 18:08:00

Answer 3

A:

modify the select box with javascript:

find the longest country name, then modify every option so there are enough spaces between country name and calling code.

Spikolynn 2009-01-27 17:55:17

Answer 4

A:

Mono-spacing is the correct answer but.... you can get pretty close (not perfect) using some jQuery to repeatedly measure a text string in a hidden span.

var list = [ ["Afghanistan","+93"], ["Albania","+355"], ["Algeria","+213"] ] ;
var max = 0;
for (n = 0; n < list.length; n++)
{
 var s = list[n][0] + "..." + list[n][1]; 
 $('#dummy').html(s);
 var x = $('#dummy')[0].offsetWidth;
 list[n].push(x);
 if (max < x) max = x;
}

for (n = 0; n < list.length; n++)
{
 var fill = max - list[n][2];
 var s = "...";
 while (true)
 {
  $('#dummy').html(s);
  var x = $('#dummy')[0].offsetWidth;
  if (fill <= x) break;
  s += ".";
 }
 var html = list[n][0] + s + list[n][1];
 $('#countryCallingCode').append($('<option></option').val(n+1).html(html));  
}

Scott Evernden 2009-01-27 18:55:24

Answer 5

A:

Here's a mono-space JS solution to go along with Scott Evernden's JQuery example. I only tested it in Firefox, but this should be enough to start with.

The JavaScript

var MIN_SPACES_BETWEEN_VALS = 3;

function mkOption(left, right, total)
{
    var str = left;
    var spaces = total - left.length - right.length;
    for(x = 0;x < spaces;x++)
        str += "\xA0";

    var opt = document.createElement("option");
    opt.text = str + right;
    opt.value = right;
    return opt;
}

function populate(selId, vals)
{
    var sel = document.getElementById(selId);

    var maxLeft = -1;
    var maxRight = -1;
    for(idx = 0;idx < vals.length;idx++)
    {
        if(vals[idx][0].length > maxLeft)
            maxLeft = vals[idx][0].length;

        if(vals[idx][1].length > maxRight)
            maxRight = vals[idx][1].length;
    }

    var total = maxLeft + maxRight + MIN_SPACES_BETWEEN_VALS;
    for(idx = 0;idx < vals.length;idx++)
        sel.add(mkOption(vals[idx][0], vals[idx][1], total), null);   
}

The HTML

<html>

    <head>
        <script src="selectTest.js">

        </script>
        <style>
            select
            {   
               font-family: Courier, mono;
            }
        </style>
    </head>

    <body>

        <select name="countryCallingCode" id="countryCallingCode">
        </select>
        <script>
            var vals = [["Afghanistan", "+93"], ["Albania", "+355"], ["Algeria", "+213"]];
            populate("countryCallingCode", vals);
        </script>

    </body>

</html>

Matt McMinn 2009-01-27 19:04:41

ansaurus

tags:

views:

answers:

How to achieve two different alignments inside a html option tag?

related questions