Spacing in text field

I have the following select tag for a pick list I am displaying on my form. I am trying to line up the 3 columns I have concatenated to display. I found the font setting to make it possible, but the font-size is not adjusting the size. The goal is to use any font type and line up the display columns.
<select multiple size="14" style="font-size:10px;font-family:Courier,monospace;font-weight:bold;" name="'||pvName||'" '||pvEvent||'>
gatorsjdcAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
avnerConnect With a Mentor Commented:
gatorsjdc , sure you can change the font size with these fonts :

<html>
<head>
<title>about:blank</title>
<script language="javascript1.2">
<!-- copyright(c) avcoh@yahoo.com

-->
</script>
<style>
.size12 { font-family:  Courier, monospace;font-size:12px }
.size48 {  font-family:  Courier, monospace;font-size:24px }

</style>
</head>
<body>
<select class="size12">
     <option> case of size 12</option>
</select>
<select class="size48">
     <option> case of size 48</option>
</select>

</body>
</html>


But you must use valid font-sizes :

http://developer.apple.com/internet/fonts/courier.html
0
 
DeAnCommented:
could try using tab stops.  "\t" is a tab stop

hope this helps
0
 
DeAnCommented:
column1Text + "\t" + column2Text + "\t" + column3Text

this should work, but only if the words are close to the same length.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
webwomanCommented:
You most likely won't be able to set up the columns the way you want unless you specify a monospaced font like Courier. And even then, it's iffy.

Use a special character to break up the data, or don't even bother. It's not what gets displayed that gets sent anyway. Make it easy for the user to READ, and worry about what gets selected when you process the form data.
0
 
gatorsjdcAuthor Commented:
My option tag is listed below. Not sure where to add the tab stop?

<option value="'||item_id||'">'||date||''||RPAD(INITCAP(x.desc), 30, '.')||''||amt||'</option>

Thanks,
Joe
0
 
schworakCommented:
You will need to use a fixed font (courier) and replace the spaces with &nbsp; in order to get what you are after.


<select size=14 style="font-size:10px;font-family:Courier,monospace;font-weight:bold;" >
<option value='1'>This is&nbsp;&nbsp;&nbsp;&nbsp;a test
<option value='2'>This&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;is a test
<option value='3'>This is a&nbsp;&nbsp;test
<option value='4'>This is&nbsp;&nbsp;&nbsp;&nbsp;a test
</select>


Of course, you will want to use some sort of code to generate the option list. JavaScript, VBScript, what ever you have access to. Using spaces won't do the trick. They must be non-breaking spaces.
0
 
gatorsjdcAuthor Commented:
I currently have the &nbsp in my code and is working great. The problem is that I am not able to adjust the font size. By using the courier,monospace am I not allowed to adjust the font.

Thanks,
Joe
0
 
schworakCommented:
What browser are you trying to view this with? Is it one that supports Cascading Style Sheets? (CSS)


I just recreated the code using Visual Studio and this is what it produced. Slightly different from the code above but similar.


<select size=14 style="FONT-WEIGHT: bold; FONT-FAMILY: monospace" multiple>
<option value='1'>This is&nbsp;&nbsp;&nbsp;&nbsp;a test
<option value='2'>This&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;is a test
<option value='3'>This is a&nbsp;&nbsp;test
<option value='4'>This is&nbsp;&nbsp;&nbsp;&nbsp;a
test</option>  
</select>


I have IE 6 installed here but this should work all the way back to IE4 and Netscape 4.5 (I would think). Anything older is such a small percentage it may not be worth messing with.
0
 
gatorsjdcAuthor Commented:
hey avner,

Your link that list the valid fonts was the answer. The font-family needs to be courier NEW, not just courier.

Thanks for your help,
Joe
0
All Courses

From novice to tech pro — start learning today.