ASP.NET GridView - 控件在內容頁面中移動

我有一個使用母版頁的項目。ASP.NET GridView - 控件在內容頁面中移動

還有一個內容頁面顯示我的數據在GridView控件中的摘要。

此內容元素的基礎是：

<table> 
    <tr> 
    <td>Search: <asp:DropDownList ID="ddlColum" runat="server"></asp:DropDownList></td> 
    <td>Value: <asp:TextBox ID="txtValue" runat="server"></asp:TextBox></td> 
    <td><asp:Button ID="btnSearch" runat="server" Text="Search"></asp:Button></td> 
    </tr> 
    <tr> 
    <td colspan="3"> 
     <asp:GridView ID="summaryGrid" runat="server"></asp:GridView> 
    </td> 
    </tr> 
</table>

我已經嘗試添加CSS到table，到table row，到table detail，到asp:GridView並向GridView控件控制的CssClass。

無論我做什麼，只要數據綁定到GridView控件，控件將完全填充<table>，將我的搜索控件隱藏在第一行。

在閱讀了許多其他在線相關問題後，我想這可能是因爲我的控件在後面的代碼中執行了數據綁定。因此，我重新設計了我的ASP.NET頁面以在HTML中進行綁定。問題仍然存在，我只是不再在第一行看到我的搜索控件。

有誰知道什麼會導致這樣的事情？

編輯：

徇衆要求（1人），這裏的鏈接項目：>> LINK <<（所有二進制信息已被刪除）

但是請注意，該數據綁定功能會不在你的最後。

來源

2011-11-09 jp2code

您可以限制爲調試目的而綁定的數據量嗎？綁定只有幾行時，你會得到相同的結果嗎？查看Firefox中帶有Firebug的問題頁面，該頁面也應該幫助您指出問題的方向。我也將從基於表格的控件移開。 –

將生成的html發送給驗證程序，並查看是否有標記不匹配，也可以在開發人員工具模式下打開並直接查看DOM –

jp：我已經複製了您的問題與主頁 - >內容頁面 - >相同的表，你有上面，它不會產生這個問題。請複製你的CSS在

編輯，得罪了你的CSS行是：

div { 
    left: 0px; 
    position:absolute; 
    top: 0px; 
    width:100%; 
    z-index:0; 
}

所以，你告訴所有div是絕對位置在左上角。

來源

2011-11-09 21:49:31

作爲母版頁項目，它太大了...... – jp2code

請參閱**編輯**與代碼鏈接。所有的代碼都比發佈可能沒有幫助的東西好。 – jp2code

謝謝。我已經確認CSS導致了這個問題。查看修改。 –

嘗試一下沒有CSS。此外，GridView本身呈現html表格，因此可能會導致此問題。總是檢查生成的html中的內容，而不是你看到的內容。它總是提供快速的答案，如果它是代碼問題或只是CSS不正確，隱藏一些元素，高度不正確等

來源

2011-11-09 21:51:32

...並且它創建了很多HTML！編輯我的問題以包含代碼示例的鏈接。 – jp2code

沒有看到一個HTML呈現的例子，很難說什麼是打破布局。

我會從移動基於表格的設計，爲搜索控件客場類似：

<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>

用下面的CSS樣式：

.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%; 
}

This fiddle讓您瞭解它的想法應該可以工作

添加標籤標籤還爲您提供了更易於訪問的表單。

編輯在回答你的評論，如果你從上面在你執行表（我有這種情況發生），不嵌套的表格。

<div class="container"> 
    <table> 
    <!-- Search Control Stuff --> 
    </table> 
    <asp:GridView ID="summaryGrid" runat="server"></asp:GridView> 
</div>

通過CSS設置搜索表和GridView表格的寬度適當

而且，這裏是展示如何與fieldset標籤

我的語義更好的選擇，這樣做一個new fiddle也調整了標籤的寬度和跨度

來源

2011-11-10 00:22:51

大聲笑 - 我的經理說只是把它放在桌子上，因爲CSS會花很長時間。讓我看看...... – jp2code