{"id":2647,"date":"2012-09-01T09:26:07","date_gmt":"2012-09-01T09:26:07","guid":{"rendered":"http:\/\/www.greytrix.com\/blogs\/sagecrm\/?p=2647"},"modified":"2012-09-01T09:26:07","modified_gmt":"2012-09-01T09:26:07","slug":"scrollable-content-area-for-long-descriptions","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/","title":{"rendered":"Scrollable content area for long descriptions"},"content":{"rendered":"<p>When we put multiline text fields on the screen, they work quite well with standard structure. However if you enter the large data, the content expands to fit the limits of the column and it either extends vertically or horizontally. This has no problems however when we have more panels below the screen containing this description, they are\u00a0 also pushed downwards and user needs to scroll to view them. A better option is to restrict the size of multiline text field not to extend beyond some limit and provide scroll bar to scroll the content.<br \/>\nConsider the standard case screen with description field that contains large description. A simple JavaScript given below can be written in custom content of case screen to achieve above mentioned results on Case description field.<br \/>\nif(!document.EntryForm.case_problemnote)<br \/>\n{<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0 var InHTM = new String(document.getElementById(&#8220;_Datacase_problemnote&#8221;).innerHTML)<br \/>\n\u00a0\u00a0\u00a0\u00a0 \u00a0var sNoteLength = document.getElementById(&#8220;_Datacase_problemnote&#8221;).innerText.length<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0 var NewHTM = &#8220;&#8221;;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0 if(sNoteLength&gt;500)<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0 {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 NewHTM = &#8220;&lt;DIV style=&#8217;overflow-y: auto;height=200px;width=600px;border-width:1px;border-color:CCCCCC;border-style:solid;&#8217;&gt;&#8221;+InHTM+&#8221;&lt;\/DIV&gt;&#8221;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/&#8217;Set styling<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(&#8220;_Datacase_problemnote&#8221;).innerHTML = NewHTM;<br \/>\n\u00a0\u00a0\u00a0\u00a0 }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<br \/>\n\u00a0\u00a0\u00a0\u00a0 else<br \/>\n\u00a0\u00a0\u00a0\u00a0 {<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/&#8217;Do nothing<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 NewHTM = &#8220;&lt;DIV style=&#8217;overflow-y: auto;width=600px;border-width:0px;border-color:CCCCCC;border-style:solid;&#8217;&gt;&#8221;+InHTM+&#8221;&lt;\/DIV&gt;&#8221;<br \/>\n\u00a0\u00a0<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/&#8217;Set styling<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(&#8220;_Datacase_problemnote&#8221;).innerHTML = NewHTM;<br \/>\n\u00a0\u00a0\u00a0\u00a0 }<br \/>\n}<br \/>\n<a href=\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-2648\" title=\"Img\" src=\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg\" alt=\"\" width=\"1125\" height=\"653\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we put multiline text fields on the screen, they work quite well with standard structure. However if you enter the large data, the content expands to fit the limits of the column and it either extends vertically or horizontally. This has no problems however when we have more panels below the screen containing this\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,155,332,351],"tags":[],"class_list":["post-2647","post","type-post","status-publish","format-standard","hentry","category-alignment","category-fields","category-sage-crm","category-screen-sage-crm"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Scrollable content area for long descriptions - Sage CRM \u2013 Tips, Tricks and Components<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scrollable content area for long descriptions - Sage CRM \u2013 Tips, Tricks and Components\" \/>\n<meta property=\"og:description\" content=\"When we put multiline text fields on the screen, they work quite well with standard structure. However if you enter the large data, the content expands to fit the limits of the column and it either extends vertically or horizontally. This has no problems however when we have more panels below the screen containing this\u2026 Read More &raquo;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/\" \/>\n<meta property=\"og:site_name\" content=\"Sage CRM \u2013 Tips, Tricks and Components\" \/>\n<meta property=\"article:published_time\" content=\"2012-09-01T09:26:07+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg\" \/>\n<meta name=\"author\" content=\"greysagecrm\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"greysagecrm\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/\",\"url\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/\",\"name\":\"Scrollable content area for long descriptions - Sage CRM \u2013 Tips, Tricks and Components\",\"isPartOf\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg\",\"datePublished\":\"2012-09-01T09:26:07+00:00\",\"author\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/e7ff1c8f4763b47730d6bc5e74d59c1f\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#primaryimage\",\"url\":\"http:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg\",\"contentUrl\":\"http:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Scrollable content area for long descriptions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#website\",\"url\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/\",\"name\":\"Sage CRM \u2013 Tips, Tricks and Components\",\"description\":\"Explore the possibilities with Sage CRM insights through our comprehensive blogs. As a leading Sage partner, Greytrix helps businesses maximize their Sage CRM potential with its rich expertise and immense knowledge. Here, you will find blogs that feature expert advice, tips &amp; tricks, best practices, and comprehensive guides on customizing and configuring Sage CRM for your business. Stay informed with our regular updates and expert insights!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/e7ff1c8f4763b47730d6bc5e74d59c1f\",\"name\":\"greysagecrm\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c3b4325cb326e36467f945b9b9adf2bb85e907fe092d42eb36b39743b492e626?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c3b4325cb326e36467f945b9b9adf2bb85e907fe092d42eb36b39743b492e626?s=96&d=mm&r=g\",\"caption\":\"greysagecrm\"},\"url\":\"https:\/\/www.greytrix.com\/blogs\/sagecrm\/author\/greysagecrm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scrollable content area for long descriptions - Sage CRM \u2013 Tips, Tricks and Components","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/","og_locale":"en_US","og_type":"article","og_title":"Scrollable content area for long descriptions - Sage CRM \u2013 Tips, Tricks and Components","og_description":"When we put multiline text fields on the screen, they work quite well with standard structure. However if you enter the large data, the content expands to fit the limits of the column and it either extends vertically or horizontally. This has no problems however when we have more panels below the screen containing this\u2026 Read More &raquo;","og_url":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/","og_site_name":"Sage CRM \u2013 Tips, Tricks and Components","article_published_time":"2012-09-01T09:26:07+00:00","og_image":[{"url":"http:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg","type":"","width":"","height":""}],"author":"greysagecrm","twitter_card":"summary_large_image","twitter_misc":{"Written by":"greysagecrm","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/","url":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/","name":"Scrollable content area for long descriptions - Sage CRM \u2013 Tips, Tricks and Components","isPartOf":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#primaryimage"},"image":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#primaryimage"},"thumbnailUrl":"http:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg","datePublished":"2012-09-01T09:26:07+00:00","author":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/e7ff1c8f4763b47730d6bc5e74d59c1f"},"breadcrumb":{"@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#primaryimage","url":"http:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg","contentUrl":"http:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-content\/uploads\/2012\/09\/Img.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/2012\/09\/01\/scrollable-content-area-for-long-descriptions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/"},{"@type":"ListItem","position":2,"name":"Scrollable content area for long descriptions"}]},{"@type":"WebSite","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#website","url":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/","name":"Sage CRM \u2013 Tips, Tricks and Components","description":"Explore the possibilities with Sage CRM insights through our comprehensive blogs. As a leading Sage partner, Greytrix helps businesses maximize their Sage CRM potential with its rich expertise and immense knowledge. Here, you will find blogs that feature expert advice, tips &amp; tricks, best practices, and comprehensive guides on customizing and configuring Sage CRM for your business. Stay informed with our regular updates and expert insights!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/e7ff1c8f4763b47730d6bc5e74d59c1f","name":"greysagecrm","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c3b4325cb326e36467f945b9b9adf2bb85e907fe092d42eb36b39743b492e626?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c3b4325cb326e36467f945b9b9adf2bb85e907fe092d42eb36b39743b492e626?s=96&d=mm&r=g","caption":"greysagecrm"},"url":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/author\/greysagecrm\/"}]}},"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/posts\/2647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/comments?post=2647"}],"version-history":[{"count":0,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/posts\/2647\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/media?parent=2647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/categories?post=2647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/sagecrm\/wp-json\/wp\/v2\/tags?post=2647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}