How can I make Bootstrap cards resizable on top of other elements when clicked on an icon to make it full screen and overlay on other cards?
detail.component.html
<div class="card card-outline-info" >
<div class="card-header bg-info"><h5>Detail</h5><span class="pull-right p fa fa-compass" [ngClass]="{'expandWidget':isClassExpanded}" (click)="onClickMe($event)"style="font-size:25px"></span></div>
<div class="card-block">
<div class="table-responsive" style="cursor: pointer">
<generic-table [gtClasses]="'table-hover'" #myCustomTable [gtSettings]="secondConfigObject.settings" [gtFields]="secondConfigObject.fields" [gtData]="secondConfigObject.data"></generic-table>
</div>
</div>
</div>
app.component.ts
onClickMe(ev) {
ev.preventDefault();
cons event = this;
if (event.children('span').hasClass('fa fa-compass'))
{
event.children('span').removeClass('fa fa-compass');
event.children('span').addClass('fa fa-exchange');
}
else if (event.children('span').hasClass('fa fa-exchange'))
{
event.children('span').removeClass('fa fa-exchange');
event.children('span').addClass('fa fa-compass');
}
(event).closest('.card').toggleClass('expandWidget');
}
app.component.css
.expandWidget {
display: block;
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}