Link to home
Start Free TrialLog in
Avatar of szetoa
szetoa

asked on

Sizing drop down menu inside a table.

<HTML>
  <HEAD>
    <TITLE>DropDownMenu</TITLE>
  </HEAD>
  <BODY>
    <TABLE>
      <TR>
        <TD>
          <SELECT NAME="menu1">
            <OPTION VALUE="0">International Business Machine
            <OPTION VALUE="1">American Telephone & Telegraph
            <OPTION VALUE="2">American OnLine
            <OPTION VALUE="3">Sun Microsystem
          </SELECT>
      <TR>
        <TD>
          <SELECT NAME="menu2">
            <OPTION VALUE="0">IBM
            <OPTION VALUE="1">T
            <OPTION VALUE="2">AOL
            <OPTION VALUE="3">SUNW
          </SELECT>
    </TABLE>
  </BODY>
</HTML>

===========================
When I run the above html, the first drop down menu is much
wider than the second one.  How do I FORCE the second one
to have the same width as the first (without hardcoding the
size)?  In other words, how do I ensure all drop down menus
in the same table column to have the same width of the widest
one?
Avatar of oubelkas
oubelkas

It isn't possible to determine what the width of the widest box is, therefore you must give the width hard to the selects, so in this case :
<SELECT NAME="menu2" STYLE="width:230">

J.
You can use a stylesheet to make sure all the dropdown boxes are always the same length :

<style type="text/css">
<!--
select { width:230; }
// -->
</style>

put this between <head> </head> tags. This way you yourself must determine the widest box and give this width in the style sheet. In this style sheet you can also declare more things like the following :

select {height: 14pt; font-size: 9pt;  font-family: Arial, Helvetica, sans-serif; background-color: #EEEEEE; }

See if this helps.

J.


ASKER CERTIFIED SOLUTION
Avatar of potent
potent

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Well, there was a learning experience for me! Let's try this:

<BODY>
<TABLE>
<TR>
<TD>

<FORM>
<SELECT NAME="menu1">
<OPTION>-- Please Choose From The Following --
<OPTION VALUE="0">International Business Machine
<OPTION VALUE="1">American Telephone & Telegraph
<OPTION VALUE="2">American OnLine
<OPTION VALUE="3">Sun Microsystem
</SELECT>

<P>

<SELECT NAME="menu2">
<OPTION>-- Please Choose From The Following --
<OPTION VALUE="0">IBM
<OPTION VALUE="1">T
<OPTION VALUE="2">AOL
<OPTION VALUE="3">SUNW
</SELECT>
</FORM>

</TD></TR>
</TABLE>

</BODY>
it's true what potent says about CSS not working in NS, but if you use IE, then this is a good solution.

J.
Avatar of szetoa

ASKER

oubelkas and potent,

I am looking into your solutions.  Will get back to you very soon.

szetoa
Avatar of szetoa

ASKER

Oubelkas,

    Actually, your answer was what I am looking for.  Although I may have problem if the text string is longer than the width specified.  But I can always adjust the width to handle the longest string.

Potent,

    Your solution was also good, except I cannot use a null option.  And I cannot create a null option which is long enough to cover all cases (my web page has > 30 menus).

Here's what I would do.  I will grade this answer and I will also post a question just for Oubelkas.  Thanks so much for your help.

A.
I didn't realize you code your pages only for IE as that is not what you stated in your question. Since my answer works on all systems and Browsers, and Oubelkas does not, I object to your conclusion on that basis.

BTW - A null option is created with the simple insertion of it. I only called the function by it's correct name, not intending to confuse.


Website Rob
----------------
Helping people create
a Potent Website

Thank You Szetoa. Just caught up with my Mail and having hard typing this, because my foot is in my mouth :-(

Let me know if you need some help (if you're using JS or Perl) and you can reach me at potentproducts@bigfoot.com


Website Rob
----------------
Helping people create
a Potent Website

Avatar of szetoa

ASKER

Potent,

  You are absolutely right about the page is for IE only.  As I started my application, I had both IE and NN in mind.  Since this is not a general web page for the public and my users had requested a lot of features, and not to mention that a lot of things that NN did not support, I ended up forgetting NN totally.  For example, NN does not support any event in <SELECT> and I need to do a lot of things when an option is selected.  Luckily for me, my users standard is IE.

A.
szetoa > thx...

and potent > chill aight! Just don't drill somebody's comment into the ground, this isn't a competition, we're justing helping other people's problems, so it's up to the person of the question to verify somebody's comment or answer....

J.
aight


Website Rob
----------------
Helping people create
a Potent Website