Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Drop-down List Box Width

Posted on 2000-02-29
7
Medium Priority
?
428 Views
Last Modified: 2013-12-24
I have a web page that has drop-down list boxes.  Their width auto-sets depending on the width of the data in the list.  How do I manually set the list box to a certain width rather than letting the box auto-set its own width?
0
Comment
Question by:dekkyb
[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
7 Comments
 
LVL 4

Expert Comment

by:NickRackham
ID: 2569381
right click the box, and choose Form Field Properties, then specify the width. I think the standard is 20.
0
 

Author Comment

by:dekkyb
ID: 2570044
If you right click the box and choose Form Field Properties, there is no option to specify the width.  There is height, tab order, and name.
0
 

Author Comment

by:dekkyb
ID: 2570049
Adjusted points to 300
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 3

Expert Comment

by:fibdev
ID: 2570449
The only way I've found too do this is to add spaces after the first menu item until it is the desired width.  It's kinda' sloppy, but it works.

Example:

  <p><select size="1" name="D1">
  <option>
Choice One&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  </option>
  <option>Choice Two</option>
  <option>Choice Three</option>
  &nbsp;
  </select></p>
0
 
LVL 3

Expert Comment

by:fibdev
ID: 2570460
Didn't paste right :(

here:

<p>
  <select size="1" name="D1">
    <option>
    Choice One&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;
    </option>
    <option>Choice Two</option>
    <option>Choice Three</option>
  </select>
</p>


0
 
LVL 1

Accepted Solution

by:
MikeyG earned 1200 total points
ID: 2570827
The trick here, I think, is to set the sizing of the control using absolute positioning.  You can do this by performing the following steps:

1:  Double click on your drop down box to get the properties up
2:  Click on the 'Style' button in the left hand corner of the window.
3:  Click on the 'Format' button, and then select 'Position...'
4:  Now you can choose how the form field is positioned on the screen, and in addition, its size.  For your needs, select the 'Relative' option under 'Positioning Style'.
5:  Enter the width of the combo in pixels.  (You can resize it later if needed, so just enter 100 for the time being)
6:  Click ok on all the windows to get back to the design view of your page.
7:  You can now resize the combo box by dragging on its corners/edges.

Hope that helps...
0
 

Author Comment

by:dekkyb
ID: 2573454
I had talked to a number of individuals that have experience with web page design and implementation and none of them knew how to do this.  It works perfectly.

Thanks very much!!
0

Featured Post

Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

Question has a verified solution.

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

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
Suggested Courses

660 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