Action Log Comment Box

Raymond_Didonato

I had worked on a customization for our Tech Support team that shrunk the comment box in the Action Log and then replaced the Action Log comments table with a custom log.  We didn't find the need for the Add Comment box to be so large, and the comments table below was nice, but doesn't just show the comments by default.  Comments are short and sweet around here.  Additionally, I wanted all of the content in the incident form to display without scrolling (for those with decent monitors..)

I upgraded the portal this morning from 8.3 to 8.7 because we're still in Test and I wanted to try an upgrade at some point before going to production just so I could tell our management team I've done one and it was succesful.  After the upgrade, it seems my customization for the comment box size has a different effect.

Here's what my custom "Action Log" looks like now:



and this is the way it looked before:





To explain further, when I was on 8.3, that smaller comment box shifted up when I resized it, and now it just pushes it down, and keeps all the empty space.  All I was doing was selecting the editable element in the div and changing the height via JS.  I haven't made any changes to the code after the upgrade, I was just testing out all of the custom stuff.

Keep in mind that I'm only about 2 months in to JS, so the answer here might be very easy and I just can't see it.  I've tried resizing each div in that part of the form, and changing the display and visibility styling, but I just can't get it.  Can anyone tell me what I need to do to get it back to 8.3's styling?  Maybe it's not even possible now.

Thanks!

Justin_Workman

Raymond_Didonato I think the biggest change that you're looking at is the Kendo version being changed between 8.3 and 8.7.  Can you post your code so we can see it?

Raymond_Didonato

Sure, here's what I have to remove and resize the elements.  It might be overkill to include this whole section, but maybe it'll be helpful in some way.

// Remove and Resize existing Action Log

function customActionLog() {

     //Remove the Action Log panel heading

     let panelHeading = document.getElementsByClassName('panel-heading');

     panelHeading[1].style.display = 'none';

     //Resize the comment box textarea

     let commentBox = document.querySelector('td.k-editable-area');

     commentBox.style.height = "26px";

     //Change the comment box label

     let commentHeading = document.querySelectorAll('label[for=commentBoxEditor]');

     commentHeading[0].innerText = "Add Comment";

     //Remove the action log comment table

     let commentTable = document.querySelectorAll('table[role=treegrid]');

     commentTable[0].style.display = 'none';

    // Remove is private check box and character count

    let spanRow = document.getElementsByClassName('col-md-12');

    let commentSpan = spanRow[3].getElementsByTagName('span');

    commentSpan[4].style.display = 'none';

    for (let i = 0; i < 3; i++) {

         commentSpan[i].style.display = 'none';

    }

    let privateCheckBox = document.querySelector('div.action-log-private');

    privateCheckBox.style.display = 'none';

    //Collapse a div between the comment box and comment log
    let emptyRow = document.getElementsByClassName('col-md-12');

    emptyRow[4].style.visibility = 'collapse';
}

Raymond_Didonato

Seems like I can at least tinker with the position property to adjust the layout back to the way I had it.  It's at the very bottom of the form, so that makes it a bit easier to work with, although I'm sure what I'm doing isn't developer best practice.  And the portal will only be consumed on desktops so I don't have to worry much about appearance on other devices.