title: FormView Layout
body: <p>This has driven me crazy a few times in the past but I've always fudged it and moved on. Today I want to try and fix it!</p>
  
  <p>I quite frequently create a <code>GridView</code> to display data and a <code>FormView</code> directly beneath in Insert mode with controls in the InsertItemTemplate corresponding to the columns in the <code>GridView</code>, so that it looks like the <code>FormView</code> is just an empty row of the <code>GridView</code> awaiting new data entry.  This works great.</p>
  
  <p>The problem is that I can never get the widths of the 'columns' (really just textboxes) in the <code>FormView</code> to correspond to the widths of the columns in the <code>GridView</code> above.</p>
  
  <p>In the example below, as you can see, both the <code>GridView</code> and <code>FormView</code> have a width of 100% and, sure enough, when the page is rendered they're both exactly the same width (I gave the <code>FormView</code> a border briefly to check).  However, even though the widths of the textboxes in the <code>FormView</code> are identical to the widths of the columns in the <code>GridView</code>, they don't display that way.  The textboxes are slightly wider, and by the time you get to the right-most column the cumulative effect means that the alignment is way out.</p>
  
  <p>I'm guessing the problem is something to do with border widths or some other hidden element which is being rendered, but I can't figure it out.  I have to say, the amount by which the alignment is out seems more than the couple of pixels a border would affect things.</p>
  
  <pre><code>&lt;asp:GridView ID="gvTPR" runat="server" DataSourceID="SQLTPR" AutoGenerateColumns="false" DataMember="DefaultView" DataKeyNames="TPRID" Width="100%" &gt;
  &lt;RowStyle HorizontalAlign="Center" /&gt;
  &lt;EditRowStyle BackColor="#ccffff" /&gt;
  &lt;HeaderStyle BackColor="#013b82" ForeColor="White" /&gt;
  &lt;Columns&gt;
  &lt;asp:BoundField DataField="TPREnteredAt" HeaderText="Entered At" ReadOnly="True" SortExpression="TPREnteredAt" ItemStyle-Width="24%" ControlStyle-Width="90%" /&gt;
  &lt;asp:BoundField DataField="TPRTemp" HeaderText="Temp" ReadOnly="True" SortExpression="TPRTemp" ItemStyle-Width="12%" ControlStyle-Width="90%"/&gt;
  &lt;asp:BoundField DataField="TPRPulse" HeaderText="Pulse" ReadOnly="True" SortExpression="TPRPulse" ItemStyle-Width="12%" ControlStyle-Width="90%"/&gt;
  &lt;asp:BoundField DataField="TPRRespiration" HeaderText="Respiration" ReadOnly="True" SortExpression="TPRRespiration" ItemStyle-Width="12%" ControlStyle-Width="90%"/&gt;
  &lt;asp:BoundField DataField="TPRPCV" HeaderText="PCV" ItemStyle-Width="12%" ControlStyle-Width="90%"/&gt;
  &lt;asp:BoundField DataField="TPRTP" HeaderText="TP" ItemStyle-Width="12%" ControlStyle-Width="90%" /&gt;
  &lt;asp:CommandField ButtonType="Button" InsertVisible="False" ShowEditButton="True" ItemStyle-Width="16%" UpdateText="Save" ControlStyle-Width="60px" /&gt;
  &lt;/Columns&gt;
  &lt;EmptyDataTemplate&gt;
  No TPR records exist
  &lt;/EmptyDataTemplate&gt;
  &lt;/asp:GridView&gt;
  &lt;asp:FormView ID="fvTPR" runat="server" DataSourceID="SQLTPR" DefaultMode="Insert" Width="100%" &gt;
  &lt;InsertItemTemplate&gt;
  &lt;asp:textbox ID="lblEnteredAt" runat="server" Text="Will be added automatically" Width="24%" /&gt;
  &lt;asp:TextBox ID="txtTemp" runat="server" Text='&lt;%# Bind("TPRTemp")%&gt;' Width="12%" /&gt;
  &lt;asp:TextBox ID="txtPulse" runat="server" Text='&lt;%# Bind("TPRPulse")%&gt;' Width="12%" /&gt;
  &lt;asp:TextBox ID="txtRespiration" runat="server" Text='&lt;%# Bind("TPRRespiration")%&gt;' Width="12%" /&gt;
  &lt;asp:TextBox ID="txtPCV" runat="server" Text='&lt;%# Bind("TPRPCV")%&gt;' Width="12%" /&gt;
  &lt;asp:TextBox ID="txtTP" runat="server" Text='&lt;%# Bind("TPRTP")%&gt;' Width="12%" /&gt;                
  &lt;asp:Button ID="btnAddTPR" runat="server" Text="Save" Width="5%" /&gt;
  &lt;/InsertItemTemplate&gt;
  &lt;/asp:FormView&gt;
  </code></pre>
  
  <p>This renders like this:
  <img src="https://i.stack.imgur.com/aTB7R.png" alt="Rendered GridView and FormView"></p>