My asp.net dropdown list control is set up with item names and prices like this:
Pen | 2.09
Book | 1.2
Handbag | 30.50
Pencil | 1.05
The alignment of the items in the dropdown is perfect when using font-family: "Courier New" , Courier, monospace;
However, the entire page is styled with Arial font and I need the dropdown to match. How can I make this adjustment?
I tried wrapping each character in a span tag using jQuery like this:
var array = $dropdownItem.text().split('');
var result = '<span>' +
array.join('</span><span>') +
'</span>';
$dropdownItem.html(result);
I was hoping to apply a fixed font width to each character, but I'm not sure how to do that. Any assistance would be greatly appreciated.