New Zenner
- Join Date:
- Feb 2009
- Posts:
- 23
- Plugin Contributions:
- 0
Tip: Adjusting the width of pull-down menu
By default, the width of a pull-down menu is determined by the longest option under the menu.
What if you want to adjust the width to make it look & align better with other elements on your page?
Unfortunately setting the width of <select> does no good.
You can, however, set the width of the <option>s to actually control the width of the pull-down menu.
For example, if you want to adjust the width of the "Limit to Category" pull-down menu in Advanced Search page, open
includes/templates/YOUR_TEMPLATE/templates/tpl_advanced_search_default.php
(If you're using template_default, you're strongly suggested to create YOUR_TEMPLATE for overriding)
and find
<?php echo zen_draw_pull_down_menu('categories_id', zen_get_categories(array(array('id' => '', 'text' => TEXT_ALL_CATEGORIES)), '0' ,'', '1'), $sData['categories_id']); ?>
Add an identifer by changing the code to
<?php echo zen_draw_pull_down_menu('categories_id', zen_get_categories(array(array('id' => '', 'text' => TEXT_ALL_CATEGORIES)), '0' ,'', '1'), $sData['categories_id'], 'id="advancedSearchCat"'); ?>
Finally, add the following to your stylesheet:
#advancedSearchCat {width: 235px}
#advancedSearchCat option {width: 235px}
That should do it.
You need to add both lines and change the widths in your stylesheet to work properly in both IE and FF.
Good luck,
Susan
