Untitled

<div class = "bcmBodyContainer">

	<div id= "rightDiv" style= "margin-left: 7px; margin-top: -18px; width: 98.6%;" class= "span">
		<div class = "bcmBlueDivBorder" style="margin-left: 7px;height: 715px;margin-top: 20px;">
			<div class = "arrow" style="margin-left: -8px; cursor: default; width: 215px;">
				<div style= "margin-top: 2% ; margin-left: 2% ; width: 200px;" >
						<span>{{arrowText}}</span>
				</div>
			</div>

			<select
				style="height: 28px; margin-left: -192px; margin-top: 70px; resize: none; width: 500px;"
				[(ngModel)]="selectedvalue" (ngModelChange)="getList()">
				<option value="">Select</option>
				<option *ngFor="let a of assetlist" (click)="getList(a.lookUpID)">{{a.lookUpName}}</option>
			</select>

 
<br /> <a *ngIf="selectedvalue"  (click)="editButton()"
				style="float: right; margin-right: 750px; cursor: pointer; font-size: 14px; font-family: 'Roboto'; color: blue; text-decoration: underline; margin-top: -6px;">
				Edit</a>

			<div *ngIf="selectedvalue"  class="bcmBlueDivBorder " style="margin: 50px 15px;background-color: #B9CDE5;  width: 60%;">
				
				
				<span  style="display: inline-block; margin-left: 11px; font-weight: bold;">Asset</span>
				<div *ngIf = "!isEditing" style="   margin-top: 6px;  border-top: 2px solid #8C9AB8;overflow-y: scroll;   max-height: 402px;" >
		
						
					<div *ngFor="let name of dep; let i = index; trackBy: trackByFunction">
						<input id="name.lookUpID" [(ngModel)] = "name.lookUpName" [disabled]=!isEditing type = "text" keypress = "blockSpecialChar($event)" (input) = "textLengthCounter(i)" maxlength="100" style="height: 28px; width: 387px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px ">
						<span style= "margin-left: 80px; margin-right: 20px">{{name.lookUpName.length}} of 100</span>
						<button [disabled]=!isEditing (click) = "deleteFunctionName(i)"></button>
					
					</div>
				
				
				</div>
							
				<div *ngIf = "isEditing" style="   margin-top: 6px;  border-top: 2px solid #8C9AB8;overflow-y: scroll;   max-height: 402px;" >
				
					<input *ngIf = "newLookupNameAdded" [(ngModel)] = "newlookUpName" type = "text" (input) = "onInput($event)"  keypress = "blockSpecialChar($event)" maxlength="100" style="height: 28px; width: 387px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px" >
					<span *ngIf = "newLookupNameAdded" style= "margin-left: 80px; margin-right: 20px">{{ newlookUpName.length}} of 100</span>
					<button *ngIf = "(showAddButtonWhileTyping || showAddButton)&& (newLookupNameAdded && showAddButtonWhileTyping)"  (click) = "addFunctionName()" style="margin-left: 20px; margin-top: 10px;">
						<img src= "assets/add.png" alt = "Add" 
							style="cursor: pointer;height: 20px; width: 20px; float: right;" />
					</button>	
					
					<button *ngIf = "(showAddButtonWhileTyping || showAddButton)&& !newLookupNameAdded " (click) = "addFunctionName()" style="margin-left: 600px; margin-top: 10px; position: absolute;">
			<img src= "assets/add.png" alt = "Add" 
					style="cursor: pointer;height: 20px; width: 20px; float: right;" /></button>	
						
					<div *ngFor="let name of dep; let i = index; trackBy: trackByFunction">
						<input id="name.lookUpID" [(ngModel)] = "name.lookUpName" type = "text" keypress = "blockSpecialChar($event)" (input) = "updateOldLookupName(name.lookUpID,name.lookUpName)" maxlength="100" style="height: 28px; width: 387px; margin-left: 10px; margin-top: 10px; margin-bottom: 10px ">
						<span style= "margin-left: 80px; margin-right: 20px">{{name.lookUpName.length}} of 100</span>
						<button *ngIf = "name.lookUpID == 0" (click) = "deleteFunctionName(i)"><img src= "assets/delete_red.png" alt = "Delete" style="cursor: pointer;" width="20" height="20"/></button>
					
					</div>
				
				</div>		
			</div>			
		
		<div *ngIf = "isEditing " style="  margin-top: 15px;  margin-left: 16px;">
		<button type="submit" class = "submitButton" (click) = "warningPopup()">
		<span>Submit</span></button>
				
			<a class= "bcmLink" style="cursor: pointer; font-size: 16px; margin-right: 388px; margin-left: 10px; text-decoration: underline;" (click) = "cancel()">
			<span style="  color: blue;">Cancel</span></a>
		</div>	
	</div>
	
	</div>
	
</div>
	
<div *ngIf="showPopup" class="modal-content"
		style="border: 8px solid #265B9B; width: 500px;">
		<div class="modal-header"
			style="color: white; background-color: #265B9B; padding: 0px 1px; height: 23px;">
			<b style="font-size: 15px;"><span msg="" key="Warning">Warning</span></b>
			<button type="button" class="closeClass" data-dismiss="modal" (click) = "cancelpopUp()"
				style="background-color: transparent; margin-right: -8px; border: 0px none; color: white; font-size: 30px; float: right;">
				<span aria-hidden="true">&times;</span> <span class="sr-only"></span>
			</button>
		</div>
		<div class="modal-body">
			<span>Data once Submitted cannot be Deleted.</span> <span msg=""
				key="Warning_question">Do you want to continue?</span> <br> <br>
			<span>
				
				<button type="submit" class = "submitButton" (click) = "submit()">
				<span>Yes</span>
				</button>
				
				
				<button style="margin-left: 20px" type="submit" class = "submitButton" (click) = "cancelpopUp()">
				<span>No</span>
				</button>
				
				
			</span>
		</div>
	</div>

	
	
	can you modify the above html code and add and modify the CSS for the code.