Support Article
Application buttons missing from harness in IE 8
SA-9279
Summary
Users reported an issue about harness level buttons not shown on the screen while processing a work object. Users open a case, that belongs to a client/person, and perform some operation. At one step, a link is shown on work object. Clicking on the link displays the customized perform harness.
The customized harness has two buttons displayed at the bottom. The buttons use OOTB control.
While processing some work objects, it was observed that the buttons at the bottom are not displayed. Hence, users can't proceed ahead with the work.
Error Messages
No error messages.
Steps to Reproduce
a) Create a custom harness.
b) At the bottom pane of harness where buttons are placed, refer a section.
c) Configure two buttons inside the section.
Root Cause
During screen share, we captured fiddler data and could notice that code to display the buttons was received at browser.
When inspecting HTML we could see that DOM elements corresponding to buttons are generated. The buttons are not shown due to 'display:none' being applied on one of the tables. If we change it to 'display:block;' buttons came up.
When the harness was displayed, the HTML mark up had two divs. One div with id as "HARNESS_CONTENT" wraps entire harness sections. There was a div below that with id "HARNESS_BUTTONS" which has the mark up to display the harness buttons. The buttons are wrapped inside a table present in this div.
Now, in working scenario the problem does not occur because the two divs mentioned above are independent/not wrapped in one-another. For non-working scenario the "HARNESS_BUTTONS" div gets wrapped inside "HARNESS_CONTENT" div and a CSS to hide table, containing harness buttons, gets applied.
The problem was observed with few work objects and only in production system. Moreover, when we processed the same work object in IE9, the buttons were displayed.
Resolution
The html source code in IE8 showed the markup of buttons. The wrapping of divs was different in different versions of IE. We speculated that the problem could be because of few tags not being closed. While IE9 did automatic insertion of non-closing tags, IE8 didn't. Observed that for all non-working scenarios a table had below markup.
<table title='Sample text discuss benefits of grants to save for child/ren's education. '> <tr> <td class=ellipsis style="" > Some Text</td> </tr> </table>
The title attribute had a special character that caused the markup to break in IE8. This mark up was generated from a custom control. The code in custom control was specified as:
<table cellspacing='0' cellpadding='0' style="table-layout:fixed;width:100%;" title='<%=tools.getProperty("someProperty").getStringValue()%>'>
Directly assigning the property value to title attribute caused special characters from being escaped and broke the mark-up.
The above code was changed with below lines:
<pega:withReference name="$this"><pega:save name="msg" ref=".someProperty"/></pega:withReference>
<table cellspacing='0' cellpadding='0' style="table-layout:fixed;width:100%;" title='<pega:reference name="$save(msg)" />'>
Published January 31, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.