Help Questions | Solutions | Experts

Select Categories Below

.net [

]

Bluetooth [

]

browsers [

]

C# [

]

computer [

]

Errors [

]

forms [

]

HTML [

]

information tec... [

]

internet [

]

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Closed Points: 125 Time: 04:30 - Sep 05, 2007

mary2

How do I set the width of a Select Tag box with multiple selections in HTML?

I am creating a selection box in HTML and the width will only go as wide as the characters of the options I put in, and I want to have a standard width to these boxes. Example:

<select multiple size='15'>
<option>Category Name 2
<option>Category Name 3
<option>Category Name 2
<option>Category Name 3
<option>Category Name 2
</select>

But I want it to extend well past the longest category name so there is some padding after that name and if I make multiple boxes they can be a standard width and not depend on the longest Category name. How do I accomplish that?

Categories:

Select Tag Width
Tags Setting Width

Answer Discussion

Tutorials

rcastagna

Date:: Oct 10, 2007

Time:: 07:29

John,

You can set this with a CSS class or inline style:

<html>
<head>
<style>
  .red
  {
   color: red;
   font-size: 2em;
  }

  .wide
  {
   width: 10em;
  }
</style>
</head>
<body>
<select multiple size='5' style="width: 20em;">
  <option>Text 1</option>
  <option>Text 2</option>
  <option class="red">Text 3</option>
  <option>Text 4</option>
  <option style="color: blue; font-weight: bold;">Text 5</option>
</select>
<p />
<select multiple size='5' style="width: 20em;">
  <option>Text 1</option>
  <option>Text 2</option>
  <option class="red">Text 3</option>
  <option>Text 4</option>
  <option style="color: blue; font-weight: bold;">Text 5</option>
</select>
<p />
<select multiple class="wide">
  <option>Text 1</option>
  <option>Text 2</option>
  <option class="red">Text 3</option>
  <option>Text 4</option>
  <option style="color: blue; font-weight: bold;">Text 5</option>
</select>
</body>
</html>

The biggest problem I see with your requirements is knowing the length of the longest option, especially if you make the population of these lists dynamic.

I hope this helps...

Ric

mary2

Date:: Oct 11, 2007

Time:: 03:40

Ric,

That answer is great. It works perfectiy.

Thanks so much.

Question Answered

This question has been closed, and points have been rewarded to the following experts:

rcastagna:

125

You're welcome however to comment or give additional information or if you wish, you have the ability to write a Tutorial in the Tutorial Area.

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

No tutorials have been submitted yet. Want to be the first?