Service portal - Widget issue

diNesh_M
Tera Contributor

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.

 

diNesh_M_0-1726855799848.png

 

 

*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, 

1 REPLY 1

Neel Patel3
Giga Guru
  1. In Chrome, if you right-click and "Inspect" the page.
  2. NeelPatel3_0-1726874346151.png
  3. Click on the left first icon.
  4. Hover over empty space, it should show you what object/tag is showing up there.
  5. And check the padding/margin of that object. Could be a class attached too,