1

Select Box Data is 

 1. USA - USD
 2. UNITED KINGDOM - GBP
 3. .... - ...
 4. COUNTRY - CURRENCY

I am asking that how can I provide an alignment between columns.

 1. USA            -   USD
 2. UNITED KINGDOM -   GBP
 3. ....           -   ...
 4. COUNTRY        -   CURRENCY

I tried to add space but characters have different widths with my default font and it did not work.

window.onload = function(){
  var s = document.getElementsByTagName('SELECT')[0].options, 
      l = 0, 
      d = '';
  for(i = 0; i < s.length; i++){
    if(s[i].text.length > l) l = s[i].text.length; 
  }
  for(i = 0; i < s.length; i++){
    d = '';  
    line = s[i].text.split('-');
    l1 = (l - line[0].length);
    for(j = 0; j < l1; j++){
      d += '\u00a0'; 
    }
    s[i].text = line[0] + d + line[1];
  }  
};
<select>
  <option value="7">United Kingdom - GBP</option>
  <option value="17">Switzerland - CHF</option>
  <option value="33">Cyprus - EUR</option>
  <option value="33">Germany - EUR</option>
  <option value="33">Estonia - EUR</option>
  <option value="33">Spain - EUR</option>
  <option value="33">Finland - EUR</option>
  <option value="33">France - EUR</option>
  <option value="33">Greece - EUR</option>
  <option value="33">Eire - EUR</option>
  <option value="33">Italy - EUR</option>
  <option value="33">Liechtenstein - EUR</option>
  <option value="33">Luxembourg - EUR</option>
  <option value="33">Monaco - EUR</option>
  <option value="33">Montenegro - EUR</option>
  <option value="33">Malta - EUR</option>
  <option value="33">Holland - EUR</option>
  <option value="33">Portugal - EUR</option>
  <option value="33">Slovenia - EUR</option>
  <option value="33">Slovakia - EUR</option>
  <option value="33">San Marino - EUR</option>
  <option value="33">Andorra - EUR</option>
  <option value="33">Belgium - EUR</option>
  <option value="40">Brazil - BRL</option>
  <option value="42">Japan - JPY</option>
</select>
Mehmet Eren Yener
  • 2,006
  • 1
  • 23
  • 37
  • Just add this CSS style using mono-space fonts: `select {font-family: consolas, courier new;}` – Abhitalks Nov 28 '14 at 14:02
  • @abhitalks did you actually try your answer? This is not a cross-browser compatible solution; it only works reliably in Firefox. See (http://stackoverflow.com/questions/10696004/how-to-change-font-family-of-drop-downs-list-item) – Palpatim Nov 28 '14 at 15:30
  • @Palpatim: Yes. I have tried it and it works perfectly in Chrome and IE11. Others browsers, I can't say for sure, but should work. – Abhitalks Nov 28 '14 at 15:34
  • the problem is I am not allowed to change font, I mentioned that I am using default font – Mehmet Eren Yener Nov 28 '14 at 18:20

0 Answers0