CODEWITHSUNDEEP
javascriptcssangular
Siegmeyer
Siegmeyer

Reputation: 4512

Can't change element's height

I'm trying to resize element by dragging (like so). I wrote a simple directive (will handle ghostbar later):

@Directive({ selector: '[drag-resize]' })
export class DragResizeDirective {
    private dragging: boolean;

    constructor(el: ElementRef, renderer: Renderer2) {
        renderer.listen('window', 'mouseup', (e) => {
            if (this.dragging) {
                el.nativeElement.style.backgroundColor = 'red'; // Works fine.
                el.nativeElement.style.height = `${e.pageY + 2}px`; // Not so much.
                this.dragging = false;
            }
        });
    }

    @HostListener('mousedown') onMouseDown() {
        this.dragging = true;
    }
}

The problem is I can't change height of the element. Other styles work fine. I'm using Angular 4.0.3.

Computed attributes:

display: block;
height: 244.781px;
left: 0px;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: 655.422px;
width: 1793px;

*renderer.setStyle() doesn't work either.

** Element I'm trying to resize is a grid tile (md-grid-tile from Angular Material).

*** Directive works on other elements.

Upvotes: 0

Views: 1021

Answers (1)

fourcube
fourcube

Reputation: 770

Edit 2:

I've dug into the md-grid-list implementation. The row height is recalculated everytime that ngAfterContentChecked is triggered (code). This happens after every mouse event and is probably the reason why setting the height has no effect.

From the md-grid-list documentation I can see that you can also pass a rowHeight (e.g. 200px) input parameter to the `md-grid-list. This seems to be cleanest way to set the row height, but will scale all rows to the same size.

If this is not the effect you want to achieve, you can try setting the height in the ngAfterViewChecked lifecycle hook.

Edit:

In case your code is trying to resize a display: inline element, you first have to apply a e.g. display: inline-block to it. Otherwise it will ignore the height value.

The style.height attribute expects numeric values to have a unit (e.g. %, px, rem, em, vh).

This should work:

el.nativeElement.style.height = `${e.pageX + 2}px`;

Upvotes: 1

Related Questions