Aligning to top a Gridview inside a cell of a table RSS

• • Reply
  washburn_it

  Member

  3 Points

  20 Posts

  Aligning to top a Gridview inside a cell of a table

  Mar 16, 2017 05:05 PM|washburn_it|LINK

  Hi,

  I have a Web Form with a TreeView and a Gridview that I would like to put one beside the other.

  So I've used an HTML Table with just two cells:

  in the first cell I've put the TreeView and in the second cell (beside the first) the GridView.

  While I can set the size of the GridView at design time (Visual Studio Express 2015 Web Edition), the GridView is "resized" at runtime according with the number of rows that I assign for a max of 20 rows (then it begins the paging).

  The problem is that when the GridView displays less than 20 rows, the size is smaller than the TreeView and it is vertically aligned to the middle of the cell, but this happens only at runtime.

  If I check the page inside the editor (design page) the GridView is "top aligned", that is what I want, but when I open the page at runtime the GridView is "vertically middle aligned".

  How can I align it always on the top of the table cell (at runtime)?

  Thank you, regards.

  Roberto

• • Reply
  Eric Du

  Contributor

  6730 Points

  2715 Posts

  Re: Aligning to top a Gridview inside a cell of a table

  Mar 17, 2017 02:50 AM|Eric Du|LINK

  Hi washburn_it,

  I hope you could post your code, it is hard to think the issue you are facing through your description. This will better help you solve your problem! 

  Best Regards,

  Eric Du

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  washburn_it

  Member

  3 Points

  20 Posts

  Re: Aligning to top a Gridview inside a cell of a table

  Mar 17, 2017 07:36 AM|washburn_it|LINK

  Hi Eric,

  this is the code of the page:

  <asp:Panel ID="pnDip" runat="server" BackColor="#DFDFDF" BorderColor="#DFDFDF" BorderStyle="Solid" CssClass="StilePannelliBottom" Height="1086px" Width="900px" HorizontalAlign="Center" Visible="False">
              <table style="width:100%;">
                  <tr>
                      <td class="TableTopAlign">
                          <asp:TreeView ID="tvElenco" runat="server" BackColor="White" BorderStyle="Solid" BorderWidth="1px" CssClass="auto-style2" ExpandDepth="0" Font-Names="Calibri" Font-Size="12pt" Height="938px" OnSelectedNodeChanged="tvElenco_SelectedNodeChanged" ShowCheckBoxes="Root" ShowExpandCollapse="False" ShowLines="True" Width="524px">
                          </asp:TreeView>
                      </td>
                      <td class="BaseSetting" style="margin: 0px"></td>
                      <td class="TableTopAlign">
                          <asp:GridView ID="gvElencoDocPriv" runat="server" AllowPaging="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#3366CC" BorderStyle="Solid" BorderWidth="1px" CellPadding="4" Font-Names="Calibri" Font-Size="12pt" Height="16px" OnPageIndexChanging="gvElenco_PageIndexChanging" OnRowCreated="gvElenco_RowCreated" OnSelectedIndexChanged="gvElenco_SelectedIndexChanged" PageSize="20" Width="320px">
                              <Columns>
                                  <asp:BoundField DataField="dataDoc" HeaderText="Data Doc.">
                                  <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                  </asp:BoundField>
                                  <asp:BoundField DataField="titolo" HeaderText="Titolo Documento">
                                  <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                  </asp:BoundField>
                                  <asp:BoundField DataField="lettoSN" HeaderText="Letto">
                                  <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                  </asp:BoundField>
                                  <asp:TemplateField HeaderText="Cancella">
                                      <ItemTemplate>
                                          <asp:ImageButton ID="ButtonDelete" runat="server" CommandArgument='<%#Bind("docID")%>' ImageUrl="~/Images/delete.png" OnClick="ButtonDelete_Click" ToolTip="Cancella questo documento" />
                                      </ItemTemplate>
                                      <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                  </asp:TemplateField>
                                  <asp:BoundField DataField="docID" HeaderText="docID" Visible="False" />
                              </Columns>
                              <FooterStyle BackColor="#99CCCC" ForeColor="#003399" Height="100%" />
                              <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
                              <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
                              <RowStyle BackColor="White" ForeColor="#003399" Height="20px" Wrap="False" />
                              <SelectedRowStyle BackColor="#009999" BorderStyle="Solid" Font-Bold="True" ForeColor="#CCFF99" />
                              <SortedAscendingCellStyle BackColor="#EDF6F6" />
                              <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
                              <SortedDescendingCellStyle BackColor="#D6DFDF" />
                              <SortedDescendingHeaderStyle BackColor="#002876" />
                          </asp:GridView>
                      </td>
                  </tr>
                  <tr>
                      <td class="auto-style6"></td>
                      <td class="auto-style3"></td
                  </tr>
              </table>
              <br />
          </asp:Panel>

  The CSS class "TableTopAlign" is the following:

  .BaseSetting {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
      border-bottom-left-radius: 2px;
      font-size: 12pt;
      font-family: "Calibri";
  }
  
  .TableTopAlign {
      align-content:center;
      vertical-align: top;
  }

  Let me know if you need more.
  Thank you, regards.

  Roberto

• • Reply
  washburn_it

  Member

  3 Points

  20 Posts

  Re: Aligning to top a Gridview inside a cell of a table

  Mar 17, 2017 07:45 AM|washburn_it|LINK

  I think I found myself the solution while watching at the posted code.

  There was a "</td" not closed after "</asp:GridView>", as soon as I "closed" it the GridView moved to the top !
  Sorry....I'm still learning with Web Programming.
  I just wonder why it worked in the "design page" of the Visual Studio.
  Thank you.
  
  Roberto

• • Reply
  Eric Du

  Contributor

  6730 Points

  2715 Posts

  Re: Aligning to top a Gridview inside a cell of a table

  Mar 20, 2017 05:59 AM|Eric Du|LINK

  Hi washburn_it,

  According to your description, I have tested your code, also I tested the html tag and server tag. I found if html tag isn't complete, it will show normally in design view.

  when you run it, it need compile in IIS, compile fail, so will cause this issue.

  if the sever control is not complete, it will show error in design view. 

  I think this phenomenon is related to the principle of the VS running.

  Best Regards,

  Eric Du

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
  
• • Reply
  washburn_it

  Member

  3 Points

  20 Posts

  Re: Aligning to top a Gridview inside a cell of a table

  Mar 21, 2017 09:18 AM|washburn_it|LINK

  Hi Eric,

  thanks for your confirm.
  Regards,

  Roberto