Changing Width of Select List In Search Form

bsoremsugar —  August 24, 2011 — 2 Comments

We recently encountered a question from someone in support asking about how a customer could change the width of the select list for a specific field in the search form. In the customer’s case, they created a custom multienum field and added labels that far exceeded the 150px width allocated to the select list. This made searching for values in the select list difficult as they could not read the full text of the select list item contents.

To solve this problem, we can take the approach of creating a SugarField template override and then apply a specific css selector style to the custom field. Here are the steps:

1) Copy include/SugarFields/Fields/Multienum/SearchView.tpl to custom/include/SearchFields/Fields/Multienum/SearchView.tpl

2) In your custom file, add an id attribute to the field so that our css selector can target a specific field:

{html_options id=’{{$vardef.name}}_enum’ name=’{{$vardef.name}}[]’ options={{sugarvar key=’options’ string=true}} size=”{{$displayParams.size|default:6}}” style=”width: 350px” multiple=1 selected={{sugarvar key=’value’ string=true}}}

3) Now append your custom css code to the custom SearchView.tpl file:

{{if $vardef.name == ‘multiselect_test_c_advanced‘}}
<style type=”text/css”>
{literal}
#multiselect_test_c_advanced_enum { width:350px !important; }
{/literal}
</style>
{{/if}}

In our example, we created a custom multienum field with name multiselect_test and so we have tweaked the Smarty code to insert a custom style rule for this element to override the default width of 150 pixels.  We placed this field in the advanced search form.

4) Go to Admin->Repair to delete the cached Smarty files and this new SugarField template should now be loaded and used to render your multienum fields.

This example assumes the case of adding the field to the advanced search panel tough you could also tweak the search and css criteria in the Smarty code to meet the needs to apply the css to the basic search form page as well.

2 responses to Changing Width of Select List In Search Form

  1. 

    Shouldn’t it be better to allow a parameter from the configuration to be passed so that field with could be bigger?

  2. 

    “1) Copy include/SugarFields/Fields/Multienum/SearchView.tpl to custom/include/SearchFields/Fields/Multienum/SearchView.tpl”

    The path should be 1) Copy include/SugarFields/Fields/Multienum/SearchView.tpl to custom/include/SugarFields/Fields/Multienum/SearchView.tpl

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s