0

The div looks like this:

<div #container [ngStyle]=...>

The container is a flexbox row if that matters that contains elements; I need to know if a new element I'm adding to the row is going to fit without causing a wrap.

Thus, my code will sum up the total sizes of each element in the container and compare it with the size of the #container.

The code is like this:

#ViewChild('container') pillContainer: ElementRef;
let maxWidth = this.pillContainer.nativeElement.????

This is where the problem is. I don't think it is offsetWidth because the numbers I was getting back were more like possibly a margin-left. There is no 'width' element though if I look in:

this.pillContainer.nativeElement.attributes. xxxx

I do find and element called (with double quotes) "width", but I didn't see a way of getting the value of that attribute.

Any ideas? Thanks in advance, Yogi

Yogi Bear
  • 943
  • 2
  • 16
  • 32

1 Answers1

0

According to documentation I stumbled across, I was in fact wrong: offsetWidth does in fact return the width of the element including borders, BUT it does not include the margins. It seems getBoundingClientRect() may be more useful as it shows the effects of any transform that was applied.
I think this is sufficient for my problem. Yogi

Yogi Bear
  • 943
  • 2
  • 16
  • 32