I am currently working on aligning my items list to the right side of the webpage. Additionally, I would like to incorporate a vertical thin separator between the left and center data structure (hierarchy) and the items list on the right.
Here is the code in Right.component.html :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header-divider">
<ul class="selection-list">
<li *ngFor="let item of getSelections()">
<button class="btn" (click)="deselect(item)" *ngIf="item.selected">
<i class="fa fa-close"> {{ item.displayName }} </i>
</button>
</li>
</ul>
</div>
The styling for Right.component.css can be seen below:
.selection-list {
list-style: none;
margin-top: 5px;
margin-bottom: 10px;
line-height: 15px;
font-size: 16px;
color: #555;
padding-left: 23px;
text-transform: capitalize;
right: 0;
}
.btn {
border: none;
padding: 0;
background: none;
}
.header-divider {
border-left:1px solid #38546d;
height:30px;
position:relative;
right:20px;
top:10px;
}
Currently, the items list appears below the hierarchy structure. What steps should I take to resolve this issue?