title: JQuery width() returning wrong value?
body: <p>I am in a scenario like this: </p>
  
  <p>We have two similar popup windows, and such popup windows are generated by a factory (in Javascript) so that they share same common events &amp; functions. One of them is our custom resize function named <code>resizeFormRowService</code>. It will get called when the browser window fires the <code>resize</code> event.</p>
  
  <p>As the popup window is in a structure like repeating</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div&gt; //label &lt;/div&gt;
      &lt;div&gt; //data  &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>The <code>resizeFormRowService</code> first get the width of the parent div with class <code>row</code>, then set it's first div child (which is label) to a fixed width like 140px, and set second div's width to "parent - first child". All are done by JQuery (as shown below)</p>
  
  <hr>
  
  <p>I found that there is a strange behavior on one of the popup in Chrome (I am comparing two similar popup windows as stated).</p>
  
  <p>The calculated width of the second child div (which is data) is 5px more than the other popup's corresponding field. So I log something in <code>resizeFormRowService</code> to trace what's going on.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>StandardTemplatePopup.prototype.resizeFormRowService = function () {
    var self = this;
    var $popUp = self.getPopup();
  
    ...
    
    var $rows = $popUp.find('.row');
    $rows.each(function () {
      var $this = $(this);
      var $firstDiv = $this.find('div:first');
      var $secondDiv = $this.find('div:eq(1)');
      var labelColWidth = self.options('labelColWidth');
  
      // labelColWidth is something we can config, so both popup firstDiv's width is the same
      // so I think the problem must be in $this.width()
      $firstDiv.width(labelColWidth);
      
      //Add by me, want to see which row is this 
      console.log($this);
      //Add by me, see this row's width
      console.log($this.width());
  
      var width = $this.width() - $firstDiv.outerWidth() - 0.5;
      $secondDiv.width(width);
    });
    ...
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Running this on both popup windows, one log <code>270px</code> while the other one log <code>265px</code>!  So I try to see which rows are they, at this point I think maybe there is some scripts within the first popup window changing the row's margin / padding and thus changing its width, but surprisingly it's not the case</p>
  
  <p><em>Here is first popup</em></p>
  
  <p><a href="https://i.stack.imgur.com/HGx5T.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HGx5T.jpg" alt="enter image description here"></a></p>
  
  <p><em>Here is the second popup</em></p>
  
  <p><a href="https://i.stack.imgur.com/cjfPU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cjfPU.jpg" alt="enter image description here"></a></p>
  
  <p>As shown, the second child div's calculated width differ by 5px, but the parent's row width is <strong>exactly the same</strong>, which is contradicting what I logged in the <code>resizeFormRowService</code>!  </p>
  
  <p>So my question is: are there any known issues of JQuery width() which lead to my problem? If no, then any advice pointing to potential cause is appreciated.</p>
  
  <p><strong>EDITED:</strong></p>
  
  <p>I hope this may hint someone, one of my teammates, by trial &amp; error, adding an empty div at the end of the first popup window</p>
  
  <pre><code>&lt;div class="col-xs-12"&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>Then everything goes fine...both popup windows will resize correctly.</p>
  
  <hr>
  
  <p><em>PS1: The smaller result: 265px is the correct and expected result</em></p>
  
  <p><em>PS2: The height difference in the images is due to the wrongly calculated width of the second child div which makes content too wide to show in one line, so the height is auto-increased</em></p>