Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2465 | Replies: 6
 |
•
•
Join Date: Jul 2005
Posts: 177
Reputation: 
Rep Power: 4
Solved Threads: 10
Junior Poster
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
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.
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.
•
•
Join Date: Aug 2005
Location: Carmel, IN
Posts: 67
Reputation:
Rep Power: 4
Solved Threads: 2
Junior Poster in Training
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
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
•
•
Join Date: Jul 2005
Posts: 177
Reputation:
Rep Power: 4
Solved Threads: 10
Junior Poster
I tried your solution, but it is not working. Here's the code snippet
Declaring the Class
And Here's the code for adding the option and specifying the class name.
Am I doing something wrong ?
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 ?
•
•
Join Date: Aug 2005
Location: Carmel, IN
Posts: 67
Reputation:
Rep Power: 4
Solved Threads: 2
Junior Poster in Training
try newOpt.className = 'GoRight';
•
•
Join Date: Jul 2005
Posts: 177
Reputation:
Rep Power: 4
Solved Threads: 10
Junior Poster
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); •
•
Join Date: Aug 2005
Location: Carmel, IN
Posts: 67
Reputation:
Rep Power: 4
Solved Threads: 2
Junior Poster in Training
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.
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.
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
