Obtaining real p width

Question

I am obtaining <p>'s width. The <p> is placed inside a <div> container with an <input> next to it. The <div> and all its contents were dynamically added to the DOM just before obtaining the width.

<div id="text-0">
<p>name</p>
<input>
</div>

<p>'s width if I look at the $(p) object properties in console is 35 (offsetWidth, clientWidth), but $(p).width() in the code returns 162, which is the width of the input element next to it. Same values are returned by all the methods $(p).innerWidth(), $(p).outerWidth(), p.offsetWidth, p.clientWidth, p.getBoundingClientRect()

Please provide a runnable [mcve] that reproduces the problem — charlietfl, Nov 16 '18 at 15:04
Check [Difference between style.width and offsetwidth in HTML?](https://stackoverflow.com/questions/8133146/difference-between-style-width-and-offsetwidth-in-html) — Mohammad, Nov 16 '18 at 15:15

score 0 · Accepted Answer · answered Nov 20 '18 at 16:24

I found out what it was - my mistake it wasn't javascript/css problem as I thought. It had to do with using AngularJs $compile on the div which I didn't mention as I thought it wasn't related to the problem. The solution is to wait for $compile and then obtain the measurements.

Obtaining real p width

1 Answers1