HOWTO: Make Text fields scrollable in detailviews

bsoremsugar —  November 30, 2011 — 4 Comments

If you have a lot of text in the Description field in a record, it can make the DetailView for a record go on and on for quite some time, making the overall readability of the record poor and hiding the subpanels the follow the record details farther down the screen. This is especially true if you use the field for storing timestamped data, such as a Work Log.

I came across this post on StackOverflow and thought it would be a good idea to figure a quick and easy solution to the problem. And thanks to the customability and flexability of the SugarFields framework, you can do this quite easily by adding a new file named DetailView.tpl in the custom/include/SugarFields/Fields/Text/ directory ( which you may have to create ) with the following contents:

<span id="{{sugarvar key='name'}}" class="sugar_field" style="max-height: 200px;overflow: scroll; display: block;">
{{if empty($displayParams.textonly)}} {{sugarvar key='value' htmlentitydecode='true'}}
{{else}} {{sugarvar key='value'}}
{{/if}}
</span>
{{if !empty($displayParams.enableConnectors)}}
{if !empty({{sugarvar key='value'}})}
{{sugarvar_connector view='DetailView'}}
{/if}
{{/if}}

Afterwards, do a Quick Rebuild and Repair and that section should be limited to 200px high, and have scrollbars if the content gets longer than that. In the end, it should look something like this:

4 responses to HOWTO: Make Text fields scrollable in detailviews

  1. 

    Thanks John, this is perfect for cases created from emails.

  2. 

    For newbies, if you do the following for the first line of John’s code:
     
    (overflow: scroll is replaced by overflow: auto) then you get only the vertical scroll bar, and only if the field is actually taller than 200 pixels.

  3. 

    Ha, the last post didn’t work of course (what a duffa!) – anyway, just replace overflow: scroll with overflow: auto in the first line.

Trackbacks and Pingbacks:

  1. SugarCRM Developer Blog » Blog Archive » HOWTO: Use CSS to change the dropdown field width - February 17, 2012

    […] method is to customize the SugarField, as shown in this blog post. But you can also use pure CSS to accomplish this as well by simply adding a style.css file in the […]

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