ASP.NET GridView - элемент управления перемещается на странице содержимого

Question

У меня есть проект, который использует мастер-страницу.

Существует также страница содержимого, которая отображает сводку моих данных в элементе управления 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. Проблема по-прежнему существует, я просто больше не могу видеть элементы управления поиском в первой строке.

Кто-нибудь знает, что может вызвать что-то подобное?

EDIT:

По популярному запросу (1 человек), вот ссылка на проект: >> LINK << </a> (вся двоичная информация была удалена)

Обратите внимание, однако, что функции привязки данных не будут работать на вашем конце.

Answer 1

Не видя пример 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%;
}

Эта скрипка дает представление о том, как она должна работать

Добавление тегов меток также даетвам более доступная форма.

Редактировать В ответ на ваш комментарий, и если вы навязываете вам таблицу сверху (у меня такое было), не вкладывайтетаблицы.

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

Установка ширины таблицы поиска и таблицы сетки с помощью CSS в зависимости от ситуации

Также здесь есть новая скрипка , показывающая, как это сделать с помощьюсемантически лучший вариант тега fieldset

Я также настроил ширину меток и интервалов

Answer 2

jp: я воспроизвел вашу проблему с главной страницей -> страница содержимого -> той же таблицей, что и у вас выше, и она не создает эту проблему.Пожалуйста, скопируйте ваш CSS.

Редактируйте, оскорбительные строки в вашем CSS:

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

Итак, вы говорите, что все Div должны располагаться абсолютно слева вверху.

Answer 3

Попробуйте без CSS. Кроме того, GridView отображает HTML-таблицу сама по себе, так что это может вызвать эту проблему. Всегда проверяйте, что находится в сгенерированном HTML, а не то, что вы видите. Он всегда дает быстрый ответ, если это проблема с кодом или просто css неверен, скрывает какой-то элемент, высота неверна и т. Д.