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.
    https://imnotobsessed.com

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;
    }

    Thread Starter veryvera

    (@veryvera)

    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

    Thread Starter veryvera

    (@veryvera)

    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.

    Thread Starter veryvera

    (@veryvera)

    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!

    Thread Starter veryvera

    (@veryvera)

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

    Thread Starter veryvera

    (@veryvera)

    <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?

    Thread Starter veryvera

    (@veryvera)

    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.