Question
Tabbed group titles are truncated
Tabbed group titles are truncated if exceeds more than 13 characters .
I see ,there is an enhancement request for the same (https://community.pega.com/support/support-articles/tabbed-group-titles-are-truncated-if-greater-16-characters).
But weird behavior is , Tab Title is being truncated when it's configured to refer the Field Value.
Application is localized ,so any suggestion to override the width of tab header .
Pega version :7.3.1
***Edited by Moderator Marissa to update platform capability tags****
This seems a limitation. The tab is truncated if the label is more than 13 characters. FDBK-9948 is the enhancement ID.
There is a local change which can fix the similar issue. please give a try:
Please append below snippet in UserWorkForm
<script> pega.workarounds = {}; pega.workarounds.MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; pega.workarounds.observeAndUpdateTitles = function(target) { // create an observer instance var observer = new pega.workarounds.MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // console.log(mutation.type, mutation.addedNodes); if (mutation.type !== "childList") { return; } var newNodes = mutation.addedNodes; // DOM NodeList if (newNodes !== null) { // If there are new nodes added var $nodes = $(newNodes); // jQuery set $nodes.each(function(i, elm) { var $elm = $(elm); var myTitle = $elm.attr('title'); var myTitleList = myTitle.split(':'); $elm.find('a#TABANCHOR > span label').text(myTitleList[0]); // set the li's title as label text // Observe for title changes, as sometimes the title will be 'Opening...' var titleObserver = new pega.workarounds.MutationObserver(titleObserverHandler); // Start the observer var titleObsConfig = { attributes: true }; titleObserver.observe(elm, titleObsConfig); }); } }); }); // configuration of the observer: var config = { childList: true }; var titleObserverHandler = function(mutations) { mutations.forEach(function(mutation) { // console.log("child mutation",mutation); // udpate the lable with the new title value var myTitle = $(mutation.target).attr('title') var myTitleList = myTitle.split(':'); $(mutation.target).find('a#TABANCHOR > span label').text(myTitleList[0]); // would be better if we remove the observer once its updated properly.. }); } // pass in the target node, as well as the observer options observer.observe(target, config); } $(function() { $('[role=tablist]:not([data-title-observ=true])').each(function(i, el) { // console.log(">>", el); pega.workarounds.observeAndUpdateTitles(el); }).attr('data-title-observ', 'true'); }); </script>