Automate the vertical resizing of a div element using code

Question

Automate the vertical resizing of a div element using code

Currently, I am utilizing Angular4+.

I am looking to dynamically resize a div vertically, but I am unsure of how to go about it. I am uncertain about where to even begin and how to accomplish this task without resorting to using jQuery. Are there any suggestions or solutions to achieve this using Angular's functionality?

.textarea {
   min-height: 150px;
   border:1px solid #ddd;
   padding:15px;
   position:relative;
}

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

<div class="textarea"contenteditable="true">
  this is a text area
</div>

For a live example, check out the stackblitz here

javascript angular css typescript

Answer 1

Answer №1

Utilizing ngStyle can help you achieve your goal:

<div class="editable-textarea" contenteditable="true" [ngStyle]="{'height.px': customHeight}">
This is a custom text area
</div>

In this code snippet, customHeight refers to a variable defined in your component:

@Component(...)
export class CustomComponent {
  customHeight = 500;
}

Answer 2

Utilizing ngStyle can help you achieve your goal:

<div class="editable-textarea" contenteditable="true" [ngStyle]="{'height.px': customHeight}">
This is a custom text area
</div>

In this code snippet, customHeight refers to a variable defined in your component:

@Component(...)
export class CustomComponent {
  customHeight = 500;
}

Answer 3

Answer №2

Guidance

import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[resizer]'
})
export class NgxResizerDirective implements OnInit {

  height: number;
  oldY = 0;
  grabber = false;

  constructor(private el: ElementRef) { }

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

  resizer(offsetY: number) {
    this.height += offsetY;
    this.el.nativeElement.parentNode.style.height = this.height + "px";
  }

  @HostListener('mousedown', ['$event']) onResize(event: MouseEvent, resizer?: Function) {
    this.grabber = true;
    this.oldY = event.clientY;
    event.preventDefault();
  }

  ngOnInit() {
    this.height = parseInt(this.el.nativeElement.parentNode.offsetHeight);
  }

}

Markup

<div class="textarea"contenteditable="true">
  this is a text area
  <div resizer></div>
</div>

Demonstration https://stackblitz.com/edit/angular-text-v-resizable

Answer 4

Guidance

import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[resizer]'
})
export class NgxResizerDirective implements OnInit {

  height: number;
  oldY = 0;
  grabber = false;

  constructor(private el: ElementRef) { }

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

  resizer(offsetY: number) {
    this.height += offsetY;
    this.el.nativeElement.parentNode.style.height = this.height + "px";
  }

  @HostListener('mousedown', ['$event']) onResize(event: MouseEvent, resizer?: Function) {
    this.grabber = true;
    this.oldY = event.clientY;
    event.preventDefault();
  }

  ngOnInit() {
    this.height = parseInt(this.el.nativeElement.parentNode.offsetHeight);
  }

}

Markup

<div class="textarea"contenteditable="true">
  this is a text area
  <div resizer></div>
</div>

Demonstration https://stackblitz.com/edit/angular-text-v-resizable

Automate the vertical resizing of a div element using code

Answer №1

Answer №2

Similar questions

Executing an Observable function in Angular Typescript a single time

Creating a dynamic layout of 9 divs in a fluid 3x3 grid

Preserving form input after an unsuccessful submission: A simple guide

What is the best way to iterate through an array and make use of index values while removing any empty elements along the

Error: The function preciseDiff is not recognized by moment

Tips for linking a function to a global variable in JavaScript with Node.js

How are these background images able to remain in a fixed position like this?

CSS error with contrasting colors, the reason behind it is unknown

Initiating a post request to the express server

When attempting to view an .html file, SVG images may not appear on

execute a JAR file on a Windows Server

Updating API calls with form submission in React.js

Extract data from a JSON-encoded array using JavaScript

Enhancing the Appearance of Google Line Charts

How can server convert the data from Websocket 8.5, which sends `<Buffer>`, into JSON format?

Angular 11 error: Unable to access 'scrollHeight' property of null object due to TypeError

The scroll bar is acting peculiarly when the height is adjusted

A guide on utilizing a function import within an exported function within ReactJS

What could be causing the preloader to fail in my React application?

Tips for showing JSON data within multiple <div> elements on an HTML page with AngularJS and ng-repeat