WordPress.org

Ready to get started?Download WordPress

Forums

Need To Shorten Width of Dropdown for Categories (14 posts)

  1. veryvera
    Member
    Posted 8 years ago #

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

  2. brittanie
    Member
    Posted 8 years ago #

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

  3. Kafkaesqui

    Posted 8 years ago #

    A little easier... Just in your stylesheet:

    #categories select {
    width: 140px;
    }

  4. veryvera
    Member
    Posted 8 years ago #

    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

  5. veryvera
    Member
    Posted 8 years ago #

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

  6. Chris_K
    Member
    Posted 8 years ago #

    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. ;-)

  7. pizdin_dim
    Member
    Posted 8 years ago #

    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.

  8. Kafkaesqui

    Posted 8 years ago #

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

    width: 100px;

  9. Rok
    Member
    Posted 8 years ago #

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

  10. veryvera
    Member
    Posted 8 years ago #

    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!

  11. veryvera
    Member
    Posted 8 years ago #

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

  12. veryvera
    Member
    Posted 8 years ago #

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

  13. Chris_K
    Member
    Posted 8 years ago #

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

  14. veryvera
    Member
    Posted 8 years ago #

    yeah
    :)

Topic Closed

This topic has been closed to new replies.

About this Topic