Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Oct 2004
    Posts
    3
    Member #
    8082
    I hope someone can help me with this problem...

    Code:
    <select>
       <option>first</option>
       <option>second</option>
       <option>third</option>
    </select>
    When I use the above in Netscape, Firefox, Mozilla, the drop down box does not change size when I increase or decrease the text size (i.e. using ctrl +/-). What happens is that the font size will increase, but the box will have a static height; thus, the text will get clipped.

    Is there a workaround without using javascript? A css trick perhaps?

    Thanks in advance.

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Are you using CSS to define the absolute size of the font?

    Note that not every component is guaranteed to change font size as they are often derived by the system.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Member
    Join Date
    Aug 2004
    Location
    Ohio
    Posts
    47
    Member #
    7210
    Quote Originally Posted by jacobi
    I hope someone can help me with this problem...

    Code:
    <select>
       <option>first</option>
       <option>second</option>
       <option>third</option>
    </select>
    When I use the above in Netscape, Firefox, Mozilla, the drop down box does not change size when I increase or decrease the text size (i.e. using ctrl +/-). What happens is that the font size will increase, but the box will have a static height; thus, the text will get clipped.

    Is there a workaround without using javascript? A css trick perhaps?

    Thanks in advance.

    Haven't tested it, but a couple things you might try are setting the overflow values of the dropdown to expand, OR setting the height of the dropdown in EM units. At least one of those two ought to work.

  5. #4
    Junior Member
    Join Date
    Oct 2004
    Posts
    3
    Member #
    8082
    Quote Originally Posted by filburt1
    Are you using CSS to define the absolute size of the font?

    Note that not every component is guaranteed to change font size as they are often derived by the system.
    I changed to this:

    Code:
    <select style="font-size:1em;">
      <option>first</option>
      <option>second</option>
      <option>third</option>
    </select>
    And the problem persists: the text size changes, but the drop down box doesn't.

    Usurper suggested setting the height of the dropdown in EM units:

    Code:
    <select style="height:2em;">
      <option>first</option>
      <option>second</option>
      <option>third</option>
    </select>
    This almost works. It does change the height of the dropdown box when I load the page, but it doesn't change when I do a ctrl +/-. I also tried with overflow, but no luck.

    Note: If I change the text size THEN click on refresh, it will get the proper height!

    Thanks again. I hope there is a solution...

  6. #5
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    Set the font and the box to em... So they both change by the same percentage..
    <select style="line-height:2em; font-size: 1.2em;">
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog

  7. #6
    Junior Member
    Join Date
    Oct 2004
    Posts
    3
    Member #
    8082
    Physt, I tried as you suggested:

    Code:
    <select style="height:2em; font-size: 1.2em;">
       <option>first</option>
       <option>second</option>
       <option>third</option>
    </select>
    But, it still does not work (I tried with height and line-height)

    I'm beginning to think it's a bug in mozilla/NN/firefox.

  8. #7
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    Maybe put those options on the option element instead of the select element?
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com