<style> .main{ font-size: 16px; line-height: 1.6rem; } .noteDateTime{ display: flex; } .btList{ width: 340px; } .operationTime{ float: left; } .ot-body{ float: left; width: 150px; } .sergion{ margin-top: 200px; } .bottom{ display: flex; } .bottom-left{ height: 300px; width: 90px; margin-left: 350px; margin-bottom: 20px; } .btListRight{ width: 370px; } </style> <div class="main"> <div class="noteDateTime"> <div class="btList"> <div class="operationTime">Date</div> <span>: <span ng-if="dateAndTime.length>0">{{dateAndTime[0].value.split(" ")[0] }}</span></span> </div> <div class="btList"> <div class="operationTime">Time</div> <span>: <span ng-if="dateAndTime.length>0">{{dateAndTime[0].value.split(" ")[1]}}</span> </span> </div> <div class="btListRight"> <div class="operationTime">Operation Duration</div> <span>: <span ng-if="operationDuration.length>0">{{operationDuration[0].value}}</span></span> </div> </div> <div class="noteDateTime"> <div class="operationTime">Bed/Cabin</div> <span>: <span >{{bedDetails.physicalLocationName}}, {{bedDetails.bedNumber}}</span></span> </div> <div class=""> <div class="otList"> <div class="ot-body">Indication</div> <span>: <span ng-repeat="data in operationIndication"> {{data.value.shortName}} <!-- <span ng-if="operationIndication[0].comment">({{operationIndication[0].comment}})</span> --> <span ng-if="data.value.name ==='Indication Others'">({{indicationNote[0].value}})</span> {{$last ? '' : ', '}} </span> </span> </div> <div class="otList"> <div class="ot-body">Name Of Operation</div> <span>: <span ng-if="nameOfOperation.length>0">{{nameOfOperation[0].value}} <span ng-if="nameOfOperation.length>0">{{nameOfOperation[0].value}}</span></span></span> </div> <div class="otList"> <div class="ot-body">Aneasthesia:</div> <span>: <span ng-if="anesthesiaOfOperation.length>0">{{anesthesiaOfOperation[0].value.shortName}}<span ng-if="oTAnesthesiaNote.length>0"> ({{oTAnesthesiaNote[0].value}})</span><span ng-if="anesthesiaOfOperation[0].comment"> ({{oTAnesthesiaNote[0].comment}})</span></span></span> </div> <div class="otList"> <div class="ot-body">Position Of Patient</div> <span>: <span ng-if="positionOfPatient.length>0">{{positionOfPatient[0].value}}</span></span> </div> <div class="otList"> <div class="ot-body">Incision</div> <span>:<span ng-if="incision.length>0"> {{incision[0].value}}</span></span> </div> <div class="otList"> <div class="ot-body">Procedure and finding</div> <span>: <span ng-if="procedureAndFindings.length>0">{{procedureAndFindings[0].value}}</span></span> </div> </div> <div> <div class="sergion"> <p>Surgeon- <span ng-if="nameOfSurgeons.length>0"><p style="white-space: pre-line" ng-bind-html="nameOfSurgeons[0].value"></p></span></p> </div> <div class="bottom"> <div class="bottom-left"><p>Aneasthetist- </p></div> <div style="margin-top: 20px;"> <p style="white-space: pre-line" ng-if="nameOfAnesthetist.length>0">{{nameOfAnesthetist[0].value}}</p> </div> </div> </div> </div>