Right Align Option Element Text

[aparnesh]

I have 3 SELECT elements, one of which contains text and the other two numbers. Values in all 3 selects are generated dynamically from ASP. The Option elements in the selects are being added by a Javascript Code like below

var newOpt ;
newOpt = document.CreateElement("option");
newOpt.text = <%=Value%> ;
document.Form1.Select1.options.add(newOpt) ;

I want the text in the option elements showing Numbers to be right aligned. How can I acheive that ? I cannot use a page wise style for the options as the Select showing text values should be left-aligned.

[Sailor_Jerry]

after this:
newOpt.text = <%=Value%> ;
you can then check the innerHTML of newOpt var.
Will the <%=Value%> always be in string format?
If not you can use isNaN() which will return true if passed a string.
If it's false then just set the className of the option to your right aligned option class.
You could also use parseInt() if the values will always be passed in as a string.

Then add that option to the DOM

[aparnesh]

I tried your solution, but it is not working. Here's the code snippet

Declaring the Class

<STYLE type="text/css">
.GoRight {
	text-align: right ;
	}
</STYLE>

And Here's the code for adding the option and specifying the class name.

newOpt = document.createElement("option");
newOpt.text = <%=mValue%> ;
newOpt.CLASS = 'GoRight';
document.Form2.lstAllowance.options.add(newOpt);

Am I doing something wrong ?

[Sailor_Jerry]

try newOpt.className = 'GoRight';

[aparnesh]

Sorry, it's still not working

<STYLE type="text/css">
.GoRight {
	text-align: right ;
	}
</STYLE>

newOpt = document.createElement("option");
newOpt.text = <%=mValue%> ;
newOpt.className = 'GoRight';
document.Form2.lstAllowance.options.add(newOpt);

[Sailor_Jerry]

There are a few things you can try here.

When trouble shooting I like to change the background of the element to lime or something. Then it's easier to see the positioning of the element.

If the text-align:right wont work. try padding-left:.5em or margin-left:.5em.

If this does not work put a break point in there or an alert with the value the newOpt class name, to ensure the className is actually being assigned.

[aparnesh]

I read in a book that the browser ignores all option element style settings inside a select. Not sure if it can be done at all. Will try some experiments. Will post here if succeed.