Adding space between the sections in Related Items

Marc-Andre_Lafleur

I am trying to add space between the sections of the Related Items tab but I am having a bit of trouble to only target the rows in Related Items. I am not an expert in JavaScript so I was hoping someone else either did what I am trying to do or could help me.

What I have works in the browser's console but won't work in the JS file (either in document.ready or window.load).

<p>var tabid = $("[data-cid*='RelatedItems']")[0].hash
</p><p>var childdiv = $(div=tabid).children('div')
</p><p>for (i = 0, len = childdiv.length; i < len; i++) { 
</p><p>childdiv[i].style.paddingBottom = '70px'
</p><p>}</p>

The tab pane div id changes at every refresh. That is why I target the RelatedItems button to get the ID (this seems to be the part that doesn't work in the JS file). Then it works pretty well to get the child rows and add space between them.


The result

Martin_Blomgren

@Marc-Andre_Lafleur
I can see several approaches to solve your initial problem where its hard to see where one section begins and another starts.

Use CSS to highlight a section without padding to much (less amount of scrolling):

CSS for highlighted sections:

@media only screen and (min-width: 1000px) {<br>&nbsp;&nbsp;&nbsp; .page_content .container-fluid .form-panel .tab-content .panel {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* border-left: 2px solid #aaa; */<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* border-top: 2px solid #aaa; */<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 0;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 13px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-left: 30px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25), 0px 2px 10px 0px rgba(0,0,0,0.18);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 10px;<br>&nbsp;&nbsp;&nbsp; }<br>}

Use CSS to add those 70px off padding:

.affecteditems-grid,<br>#RelatesToWorkItem,<br>.relateditems-grid,<br>.file-attachments {<br>&nbsp;&nbsp;&nbsp; padding-bottom: 70px;<br>}

The JS way:

<span>app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {<br>&nbsp;&nbsp;&nbsp; //bind a function to the form ready event<br>&nbsp;&nbsp;&nbsp; formObj.boundReady(function () {<br>&nbsp;&nbsp;    var tabid = $("[data-cid*='RelatedItems']")[0].hash<br>&nbsp;&nbsp;    var childdiv = $(div=tabid).children('div')<br>&nbsp;&nbsp;    for (i = 0, len = childdiv.length; i < len; i++) { <br>&nbsp;&nbsp;&nbsp;      childdiv[i].style.paddingBottom = '70px'<br>&nbsp;&nbsp;    }<br>&nbsp;&nbsp;&nbsp; });<br>});</span>

  

Tom_Hendricks

It is often the simple things that really add to the usability.

I am going to space these out and gather some user feedback, because users have commented to me that they are confused by these controls until they have been using the system for a while (usually also after I have explained it to them).  It isn't always clear where one stops and the other begins, unless you have spent as much time with the product as those of us who post to this site have.  It is true that this might cause complaints about the amount of scrolling, but I think that is a good trade.

Thanks for the great post!

Martin_Blomgren

@Marc-Andre_Lafleur
I can see several approaches to solve your initial problem where its hard to see where one section begins and another starts.

Use CSS to highlight a section without padding to much (less amount of scrolling):

CSS for highlighted sections:

@media only screen and (min-width: 1000px) {<br>&nbsp;&nbsp;&nbsp; .page_content .container-fluid .form-panel .tab-content .panel {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* border-left: 2px solid #aaa; */<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /* border-top: 2px solid #aaa; */<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 0;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; padding: 13px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-left: 30px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25), 0px 2px 10px 0px rgba(0,0,0,0.18);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-bottom: 10px;<br>&nbsp;&nbsp;&nbsp; }<br>}

Use CSS to add those 70px off padding:

.affecteditems-grid,<br>#RelatesToWorkItem,<br>.relateditems-grid,<br>.file-attachments {<br>&nbsp;&nbsp;&nbsp; padding-bottom: 70px;<br>}

The JS way:

<span>app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {<br>&nbsp;&nbsp;&nbsp; //bind a function to the form ready event<br>&nbsp;&nbsp;&nbsp; formObj.boundReady(function () {<br>&nbsp;&nbsp;    var tabid = $("[data-cid*='RelatedItems']")[0].hash<br>&nbsp;&nbsp;    var childdiv = $(div=tabid).children('div')<br>&nbsp;&nbsp;    for (i = 0, len = childdiv.length; i < len; i++) { <br>&nbsp;&nbsp;&nbsp;      childdiv[i].style.paddingBottom = '70px'<br>&nbsp;&nbsp;    }<br>&nbsp;&nbsp;&nbsp; });<br>});</span>

  

Marc-Andre_Lafleur

@Martin_Blomgren
The first option looks a lot better than what I was trying to do. I will try it today.
Thanks for sharing and helping!