Tip: Adjusting the width of pull-down menu

[susan767]

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

[tony_sar]

Great tip. i assume it can be applied to almost all zc dynamically generated elements .