Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

tabs in a dropdown (select - option)

Status
Not open for further replies.
KryptoS

KryptoS

Programmer
Feb 7, 2001
240
BE
Hello,

I have a dropdown menu that I fill up with some data (ID, store, article):

5 - Store A - Article 1
6 - Store ABCDEF - Article 2
7 - Store ZBC - Article 3

You see, this is not so nice, I want something like:

5 Store A Article 1
6 Store ABCDEF Article 2
7 Store ZBC Article 3

Is this possible? If not, someone an idea how I could do something simmular but in a different way?

visit my website at
 
Sort by date Sort by votes
Hi

Quite ugly solution :
Code: 
option {
  font-family: monospace;
  white-space: pre;
}
No idea why, the [tt]white-space[/tt] was overridden in My FireFox, so I had to add [tt]!important[/tt].

Feherke.
 
Upvote 0 Downvote
hmm I see my code didn't show right. This is what I want:

Code: 
5 Store A      Article 1
6 Store ABCDEF Article 2
7 Store ZBC    Article 3

Anyway, I tried your sollution and that didn't work...

visit my website at
 
Upvote 0 Downvote
Really? It works for me in Fx2.

Note: in Fx2, unless you style the select element in the same way, only the 'dropped down' list will show like you want, rather than the 'dropped down' list and the collapsed view.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi

Correct. Styling the [tt]option[/tt] does not affect the [tt]select[/tt] neither in FireFox 3 . I did not included [tt]select[/tt] in the style because I supposed that such formatting is meaningful only if more than one row of data is visible.

Feherke.
 
Upvote 0 Downvote
Code: 
var recordlist = document.getElementById('dropdown');
for(var i=0; i<data.results.length; i++) {
  var newOpt = document.createElement('option');
  newOpt.value = data.results[i]['ID'];
  newOpt.text = data.results[i]['name'];
  recordlist.options.add(newOpt);
}

So, it's not working? Another problem is that it has to be done with javascript :). And it needs to work with IE. My company only works with IE so...

visit my website at
 
Upvote 0 Downvote
Aaah - you have to make sure you are using NBSPs instead of normal spaces for IE. My test harness did, and it worked:

Code: 
<html>
<head>
	<style type="text/css">
		select,
		option {
			font-family: monospace;
			white-space: pre;
		}
	</style>
</head>

<body>
	<form>
		<select>
			<option>An item&nbsp;&nbsp;&nbsp;001 ABC</option>
			<option>Yet more!&nbsp;002 ABC</option>
			<option>Again&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;003 ABC</option>
		</select>
	</form>
</body>
</html>

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
826
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
792
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
239
Alt255
Alt255
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top