Looking to enhance a project in Angular 15 + bootstrap 5 by creating two draggable divs where the lower one can be vertically resized to overlap the upper one?
I've managed to set up most of it, but when dragging the lower div, its transparency makes the background color appear subordinate to the content inside.
Here is the HTML:
<nav class="navbar navbar-expand-lg bg-light fixed-top">
<div class="container-fluid">
..... First Header title .....
</div>
</nav>
<nav class="navbar navbar-expand-lg bg-primary fixed-top" style="margin-top: 40px;">
<div class="container-fluid">
..... secondary title.....
</div>
</nav>
<div class="ct-body" [style.height.px]='height' contenteditable="true" style="margin-top: 80px;">
This is the application body
<div class="grabber"></div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat...
CSS:
.ct-body {
min-height: 150px;
border:1px solid #ddd;
padding:15px;
position:relative;
}
.ct-body .grabber{
content: '';
position: absolute;
bottom: 0;
margin-left: -15px;
cursor: s-resize;
height: 9px;
width: 100%;
border-top: 1px solid #f1f1f1;
overflow: hidden;
background-color: #eff0f1;
}
app.component.ts
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'call-trace';
height = 450;
y = 100;
oldY = 0;
grabber = false;
@HostListener('document:mousemove', ['$event'])
onMouseMove(event: MouseEvent) {
if (!this.grabber) {
return;
}
this.resizer(event.clientY - this.oldY);
this.oldY = event.clientY;
}
@HostListener('document:mouseup', ['$event'])
onMouseUp(event: MouseEvent) {
this.grabber = false;
}
@HostListener('document:mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
this.grabber = true;
this.oldY = event.clientY;
}
resizer(offsetY: number) {
this.height += offsetY;
}
}