?
Solved

Spacing in text field

Posted on 2003-03-31
9
Medium Priority
?
252 Views
Last Modified: 2013-12-03
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||'>
0
Comment
Question by:gatorsjdc
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 3

Expert Comment

by:DeAn
ID: 8240086
could try using tab stops.  "\t" is a tab stop

hope this helps
0
 
LVL 3

Expert Comment

by:DeAn
ID: 8240149
column1Text + "\t" + column2Text + "\t" + column3Text

this should work, but only if the words are close to the same length.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 8240195
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:gatorsjdc
ID: 8240242
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
 
LVL 3

Expert Comment

by:schworak
ID: 8241918
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
 

Author Comment

by:gatorsjdc
ID: 8242641
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
 
LVL 3

Expert Comment

by:schworak
ID: 8242990
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
 
LVL 14

Accepted Solution

by:
avner earned 1500 total points
ID: 8243973
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
 

Author Comment

by:gatorsjdc
ID: 8246384
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

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question