Html Question posted in
Some basic documentation can be found here.

Html – Angular & Bootstrap: two divs where one overlaps the other?

I’ve a project in Angular 15 + bootstrap 5, I need to create two divs, where the one below you can drag vertically and overlap the one above to increase its size?

I created more or less everything, but the div below, when I drag, is transparent and its background-color is subordinate to the inserted content.

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">
    ..... su title.....
  </div>
</nav>

<div class="ct-body" [style.height.px]='height' contenteditable="true" style="margin-top: 80px;">
    questo è il corpo dell'applicazione
    <div class="grabber"></div>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
  </div>
  <div class="container-fluid bg-light">
    questa è la parte sottostante invece.
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos inventore quasi ex assumenda, architecto temporibus? Iusto, nulla placeat. Doloremque veniam provident, ullam doloribus mollitia sed aut illo. Ea, maiores quis?
</div>

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;
    // background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg'),none;
    background-position: 210px -364px;
    background-size: initial;
    background-repeat: no-repeat;
 }

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;
  }

}
Tags:

2

Answers


  1. 0

    As you limit container’s height, text content does not fit it, so it overflows outside element’s padding box, because that’s the default overflow behavior, and causing the described effect.

    So, you can use Bootstrap overflow utility and add overflow-hidden class to ct-body to prevent text overflowing over dragged div:

    <div class="ct-body overflow-hidden" ...

    And if you want to make upper div scrollable as well, then you can add overflow-auto class to ct-body, and move grabber element to the lower div instead (also add top: 0; instead of bottom: 0;)

    <div class="ct-body overflow-auto"...
...
<div class="container-fluid bg-light position-relative">
<div class="grabber"></div>
...
    Login or Signup to reply.
  2. 0

    Thanks to Ivanka Todorova I was able to reduce the CSS to just the below line.

    the z-index property the display property must be different than static (which is the default display of elements).

    .scroll-element {
    background-color: white;
    z-index: 3;
    position: relative;
  }

    stackblitz demo

    By setting the host element(app-root) to display flex and a class on the scrolling overlay .scroll-element, I am able to get the desired result!

    Basically we use z-index to ensure the scroll element is always above the other elements and then the transparency issue does not happen!

    Without display flex, the z-index property does not get applied!

      :host {
    display: flex;
    flex-direction: column;
  }
  .scroll-element {
    background-color: white;
    z-index: 3;
  }

    Stackblitz Demo

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search