Right Align Option Element Text
 

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.

Re: Right Align Option Element Text
 

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

Re: Right Align Option Element Text
 

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 ?

Re: Right Align Option Element Text
 

try newOpt.className = 'GoRight';

Re: Right Align Option Element Text
 

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);

Re: Right Align Option Element Text
 

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.

Re: Right Align Option Element Text
 

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.