StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
8073598
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
1
CommunityOwnedDate
CreationDate
2011-11-10T00:22:51.877
FavoriteCount
0
LastActivityDate
2011-11-10T03:06:54.870
LastEditDate
2011-11-10T03:06:54.870
LastEditorUserId
4665
OwnerUserId
4665
ParentId
8072085
PostTypeId
2
Score
2
ViewCount
0
LastEditorDisplayName
text
Body
<p>Without seeing an example of the HTML as rendered it is hard to tell what is breaking the layout.</p> <p>I'd move away from a table based design for the search controls to something like:</p> <pre><code><div class="container"> <div class="search"> <label>Search: <asp:DropDownList ID="ddlColum" runat="server"></asp:DropDownList></label> <label>Value: <asp:TextBox ID="txtValue" runat="server"></asp:TextBox></label> <span><asp:Button ID="btnSearch" runat="server" Text="Search"></asp:Button></span> </div> <asp:GridView ID="summaryGrid" runat="server"></asp:GridView> </div> </code></pre> <p>With the following CSS styles:</p> <pre><code>.search { width:100%; background-color:#F00; padding:2px; } .search label, .search span { width:32%; color:#FFF; font-weight:bold; display:inline-block; } .container table { width:100%; } </code></pre> <p><a href="http://jsfiddle.net/bX2mL/4/" rel="nofollow">This fiddle</a> gives you an idea of how it should work</p> <p>Adding the label tags also gets you a more accessible form.</p> <p><strong>Edit</strong> In response to your comment, and if you get the table enforced upon you from above (I've had that happen), don't nest the tables.</p> <pre><code><div class="container"> <table>  </table> <asp:GridView ID="summaryGrid" runat="server"></asp:GridView> </div> </code></pre> <p>Setting the widths of the search table and gridview table by CSS as appropriate</p> <p>Also here is a <a href="http://jsfiddle.net/bX2mL/5/" rel="nofollow">new fiddle</a> showing how to do this with the semantically better option of the <a href="http://www.html-tags-guide.com/html-fieldset-tag.html" rel="nofollow">fieldset</a> tag</p> <p>I've also tweaked the width of the labels and spans</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POASP.NET GridView - Control Moves around in Content Page
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USJon P
UserOwnerUserId
1. USJon P
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. COLOL - and my manager said to just put it in a table because the CSS would take too long. Let me look into that...
  singulars
  PostPostId
  PO
  UserUserId
  USjp2code

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.