Hello Team ,
I am facing issue in resolving spacing issue in service portal widget.
Have tried changing the HTML & CSS code multiple times to fix the spacing issue but no luck .
My requirement is to avoid the empty space that is getting occupied within the widget.
I will paste the screenshot below for better understanding.
(Note : Circled in red is the empty space under the "Escalate" button in widget.)
Kindly recommend me the code in HTML/CSS to fix this issue.
*Html code for the widget :
<div class="panel b">
<div class="panel-heading bg-primary" ng-if="data.allowTicketCreation == false">Escalation</div>
<div class="panel-heading bg-primary" ng-if="data.allowTicketCreation == true">Issues?</div>
<div class="panel-body">
<div class="row" ng-if="data.showEscalate == true && data.allowEsc == true && data.pendingApproval == false && data.secondEscalation==false && data.thirdEscalation==false;" text-align: justify;>
<p>${If you feel your ticket is not being responded to in an appropriate manner, please provide information in the comments field below and click escalate}</p>
</div>
<br>
<div class="row" ng-if="data.showEscalate == true && data.allowEsc == true && data.pendingApproval == false && data.secondEscalation==false && data.thirdEscalation==false;">
<label>${Escalation Comments}</label>
<textarea class="form-control" ng-model="c.data.comments"></textarea>
</div>
<div class="clearfix"></div>
<br>
<div class="row" ng-if="data.showEscalate == true && data.allowEsc == true && data.pendingApproval == false && data.secondEscalation==false && data.thirdEscalation==false">
<button type="button" class="btn btn-success btn-block" ng-disabled="submitting || submitted" ng-click="c.uiAction('escalate')" ng-show="c.showSubmit">${Escalate {{data.tableLabel}}}</button>
</div>
<div class="row" ng-if="data.escalated == true && data.allowTicketCreation == false && data.incCreated == false && data.secEscalationDone==false && data.thirdEscalationDone==false && data.hideTimestamp1==false && data.hideTimestamp2==false" text-align: justify;>
<p>${This ticket has been escalated.}</p>
<label style="font-weight: bold;">Time of Escalation:</label>
<div ng-if="data.escalated == true && data.secEscalationDone==false && data.hideTimestamp1==false && data.hideTimestamp2==false">${ }{{data.dateOfFirstEsc}}</div>
</div>
<div class="row" ng-if= "data.secondEscalation==true;" text-align: justify;>
<p>${If you feel your ticket is not being responded to in an appropriate manner, please provide information in the comments field below and click escalate}</p>
</div>
<br>
<div class="row" ng-if="data.secondEscalation==true;">
<label>${Escalation Comments}</label>
<textarea class="form-control" ng-model="c.data.comments"></textarea>
</div>
<div class="clearfix"></div>
<br>
<div class="row" ng-if="data.secondEscalation==true">
<button type="button" class="btn btn-success btn-block" ng-disabled="submitting || submitted" ng-click="c.uiAction('SecEscalate')" ng-show="c.showSubmit">${Escalate {{data.tableLabel}}}</button>
</div>
<div class="row" ng-if="data.secEscalationDone==true && data.thirdEscalation==false && data.hideTimestamp1==false" text-align: justify;>
<p>${This ticket has been escalated..}</p>
<label style="font-weight: bold;">Time of Escalation:</label>
<div ng-if="data.secEscalationDone==true && data.thirdEscalation==false && data.hideTimestamp1==false">${ }{{data.dateOfLastEsc}}</div>
</div>
<div class="row" ng-if= "data.thirdEscalation==true;" text-align: justify;>
<p>${If you feel your ticket is not being responded to in an appropriate manner, please provide information in the comments field below and click escalate}</p>
</div>
<br>
<div class="row" ng-if="data.thirdEscalation==true;">
<label>${Escalation Comments}</label>
<textarea class="form-control" ng-model="c.data.comments"></textarea>
</div>
<div class="clearfix"></div>
<br>
<div class="row" ng-if="data.thirdEscalation==true">
<button type="button" class="btn btn-success btn-block" ng-disabled="submitting || submitted" ng-click="c.uiAction('thirdEscalate')" ng-show="c.showSubmit">${Escalate{{data.tableLabel}}}</button>
</div>
<div class="row" ng-if="data.thirdEscalationDone==true && data.hideTimestamp2==false" text-align: justify;>
<p>${This ticket has been escalated...}</p>
<label style="font-weight: bold;">Time of Escalation:</label>
<div ng-if="data.thirdEscalationDone==true && data.hideTimestamp2==false;">${ }{{data.dateOfLastEsc}}</div>
</div>
<div class="row" ng-if="data.showEscalate == false && data.allowTicketCreation == false" text-align: justify;>
<p>${Escalation is not available at this time.}</p>
</div>
<div class="row" ng-if="data.allowTicketCreation == true && data.incCreated == false" text-align: justify;>
<p>${This request is closed, if you have an issue specific to this request you can open a ticket.}</p>
<button type="button" class="btn btn-success btn-block" ng-disabled="submitting || submitted" ng-click="c.uiAction('ticket')" ng-show="c.showSubmit">${Create Ticket}</button>
<label>${Ticket Description}</label>
<textarea class="form-control" ng-model="c.data.comments"></textarea>
</div>
<div class="row" ng-if="data.showEscalate == true && data.allowEsc == true && data.pendingApproval == true" text-align: justify;>
<p>${This ticket is pending approvals, thus escalation is not available}</p>
</div>
</div>
<div class="row" ng-if="data.incCreated == true" text-align: justify;>
<label class="m-b break-word">A ticket has been created!</label>
<label style="font-weight: bold;">Ticket Number:</label>
<div>${ }{{data.incNumber}}</div>
</div>
</div>
</div>
Thanks,
- In Chrome, if you right-click and "Inspect" the page.
- Click on the left first icon.
- Hover over empty space, it should show you what object/tag is showing up there.
- And check the padding/margin of that object. Could be a class attached too,
