title: Angular/Bootstrap: Input fields and how to resize to content width on page load
body: <p>and I have a series of input fields that resize their width based on the changes to their content using some inline JS and acts like an inline editor...</p>
  
  <pre><code>&lt;input type="text" class="form-control form-control-lg " value="{{project.pname}}" placeholder="Project Name" onkeyup="this.size = Math.max(this.value.length, 1)"&gt;
  </code></pre>
  
  <p>This works as expected however I am noticing that Input fields all seem to have a default width on page load regardless of any css styling (I have removed width 100% from the bootstrap css so css width is no factor in this. Seems an inbuilt default input width size from the browser settings.)</p>
  
  <p>Anyway, this means when I have short strings I still have a wide input field and worse when I have long strings content is trimmed until i focus the item and press a key (even an up,down left or right will resize the box as expected.)</p>
  
  <p>Is there any method to have these fields resize accordingly on page load.</p>