Resizing element using angular - html

Question

I wanted to make two stretchable rectangles which can be resized horizontally(both left and right).But the problem with my current code is that once i resize my first rectangle(in red),the second rectangle(in blue) automatically jumps to the initial position of the first rectangle.Please help me to fix this.
I am attaching my code along with the output images.
html file:
<div class="rectangle" [ngStyle]="style" mwlResizable [validateResize]="validate"
[enableGhostResize]="true"
[resizeSnapGrid]="{ left: 1, right: 1 }" (resizeEnd)="onResizeEnd($event)">
<div class="resize-handle-left" mwlResizeHandle [resizeEdges]="{ left: true }"></div>
<div class="resize-handle-right" mwlResizeHandle [resizeEdges]="{ right: true }"></div>
</div>
<div class="rectangle1" [ngStyle]="style1" mwlResizable [validateResize]="validate1"
[enableGhostResize]="true"
[resizeSnapGrid]="{ left: 1, right: 1 }" (resizeEnd)="onResizeEnd1($event)">
<div class="resize-handle-left1" mwlResizeHandle [resizeEdges]="{ left: true }"></div>
<div class="resize-handle-right1" mwlResizeHandle [resizeEdges]="{ right: true }"></div>
</div>
css file:
.rectangle {
position: relative;
width: 50px;
height: 50px;
border-radius: 10px;
background-color: red;
}
.rectangle1 {
position: relative;
width: 50px;
height: 50px;
border-radius: 10px;
background-color: blue;
}
.resize-handle-left,
.resize-handle-right {
position: absolute;
height: 50px;
cursor: col-resize;
width: 5px;
}
.resize-handle-left {
left: 0;
}
.resize-handle-right {
right: 0;
}
.resize-handle-left1,
.resize-handle-right1 {
position: absolute;
height: 50px;
cursor: col-resize;
width: 5px;
}
.resize-handle-left1 {
left: 0;
}
.resize-handle-right1 {
right: 0;
}
.ts file:
import { Component } from '#angular/core';
import { ResizeEvent } from 'angular-resizable-element';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() { }
public style: object = {};
public style1: object = {};
validate(event: ResizeEvent): boolean {
const MIN_DIMENSIONS_PX: number = 50;
if (
event.rectangle.width &&
event.rectangle.height &&
(event.rectangle.width < MIN_DIMENSIONS_PX ||
event.rectangle.height < MIN_DIMENSIONS_PX)
) {
return false;
}
return true;
}
validate1(event: ResizeEvent): boolean {
const MIN_DIMENSIONS_PX: number = 50;
if (
event.rectangle.width &&
event.rectangle.height &&
(event.rectangle.width < MIN_DIMENSIONS_PX ||
event.rectangle.height < MIN_DIMENSIONS_PX)
) {
return false;
}
return true;
}
onResizeEnd(event: ResizeEvent): void {
this.style = {
position: 'fixed',
left: `${event.rectangle.left}px`,
top: `${event.rectangle.top}px`,
width: `${event.rectangle.width}px`,
height: `${event.rectangle.height}px`
};
}
onResizeEnd1(event: ResizeEvent): void {
this.style1 = {
position: 'fixed',
left: `${event.rectangle.left}px`,
top: `${event.rectangle.top}px`,
width: `${event.rectangle.width}px`,
height: `${event.rectangle.height}px`
};
}
}
Links to the output:
On refreshing my page
problem with resizing

Answer 1

Remove css property top and position
import { Component } from '#angular/core';
import { ResizeEvent } from 'angular-resizable-element';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
public style: object = {};
public style1: object = {};
validate(event: ResizeEvent): boolean {
const MIN_DIMENSIONS_PX: number = 50;
if (
event.rectangle.width &&
event.rectangle.height &&
(event.rectangle.width < MIN_DIMENSIONS_PX ||
event.rectangle.height < MIN_DIMENSIONS_PX)
) {
return false;
}
return true;
}
validate1(event: ResizeEvent): boolean {
const MIN_DIMENSIONS_PX: number = 50;
if (
event.rectangle.width &&
event.rectangle.height &&
(event.rectangle.width < MIN_DIMENSIONS_PX ||
event.rectangle.height < MIN_DIMENSIONS_PX)
) {
return false;
}
return true;
}
onResizeEnd(event: ResizeEvent): void {
this.style = {
left: `${event.rectangle.left-8}px`,
width: `${event.rectangle.width}px`,
height: `${event.rectangle.height}px`
};
}
onResizeEnd1(event: ResizeEvent): void {
this.style1 = {
left: `${event.rectangle.left-8}px`,
width: `${event.rectangle.width}px`,
height: `${event.rectangle.height}px`
};
}
}

Answer 2

resizeEnd is the same event for both the rectangles. So when it fires function attached to this event will be called. In your code
functions:- onResizeEnd and onResizeEnd1 must be called togather
when resizeEnd event occurs and the values of another rectangle
got reset.
try to create separate events for both the rectangles.
let me know if this is helpful.