WordPress.org

Support

Support » How-To and Troubleshooting » Need To Shorten Width of Dropdown for Categories

Need To Shorten Width of Dropdown for Categories

  • I got this code from wordpress site:
    <li id=”categories”><?php _e(‘Categories:’); ?>

    • <form action=”<?php echo $PHP_SELF ?>” method=”get”>
      <?php dropdown_cats(); ?>
      <input type=”submit” name=”submit” value=”view” />
      </form>

    It works great – gives me all my categories in a dropdown. BUT the drop down is HUGE and I want to limit it to 140 wide. How do I do that?

    Thanks
    Vera

    OR
    if you know a plug in that will make a small drop down instead of my HUGE list of categories – I would appreciate it.

    Conscious Uncoupling & Saying Goodbye

Viewing 13 replies - 1 through 13 (of 13 total)
  • easy — try adding this to your css:

    .dropdown {
    font-size: 12px;
    color: #000000;
    width:140px;
    background-color: #FFFFFF;
    }

    then change the code you posted above from this:
    <li id="categories">

    to this:
    <li id="categories" class="dropdown">

    A little easier… Just in your stylesheet:

    #categories select {
    width: 140px;
    }

    I tried both – neither worked.
    The problem is my categories have large names in them. So the dropdown is extending to the largest category name.

    Any other ideas

    Thanks for helping!!
    Vera

    I also tried to add itemwidth: 140; but that didnt work either. Its driving me bonkers!

    I’m watching this thread very intently… last time I tried to do such a thing I concluded that the browser decides how wide to make things and may or may not pay attention to any styling. I found a solution for FF, but IE spit at it and Opera cheefully ignored it. There are even some javascript hacks that alleged to help, but I got no love.

    Thus, I have no useful tips to suggest, just an eyore-like doom and gloom message. 😉

    Kafkaesqui’s tip should certainly work:

    #categories select {
    width: 140px;
    }

    The width declaration will truncate the dropdown to 140px, without doubt. Are you sure you had the dropdown in a <div> tag with an id of categories?

    You may want to place the div/dropdown elsewhere on the page and see what happens.

    Perhaps the width is too…wide. Or at least wider than you’re expecting. Try bringing down the width property:

    width: 100px;

    Also try to reduce font size, along with width pixels.

    OMG!
    It worked!
    I put this in my sidebar:
    <li id=”categories”><?php _e(‘Categories:’); ?>

    <form action=”<?php echo $PHP_SELF ?>” method=”get”>
    <?php dropdown_cats(); ?>
    <input type=”submit” name=”submit” value=”Pick A Celeb!” />
    </form>

    AND this in my stylesheet:
    #categories select {
    width: 130px;
    }

    and this time it worked

    I dont think I put the # sign before…

    Thanks SO MUCH!

    Now do you know how to sort and change font?
    🙂

    <li id=”categories”><?php _e(‘Categories:’); ?>

    <form action=”<?php echo $PHP_SELF ?>” method=”get”>
    <?php dropdown_cats(TRUE, ‘Choose…’, ‘NAME’); ?>
    <input type=”submit” name=”submit” value=”Pick A Celeb!” />
    </form>

    I FOUND IT OUT
    Here it is in case you are interested in doing it yourself.

    Cool! Does the width work in both IE and Firefox?

    yeah
    🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Need To Shorten Width of Dropdown for Categories’ is closed to new replies.
Skip to toolbar