ASP.NET GridView - Le contrôle se déplace dans la page de contenu

Question

J'ai un projet qui utilise une page maître.

Il existe également une page de contenu qui affiche le résumé de mes données dans un contrôle GridView.

Les principes de base de cet élément de contenu sont les suivants :

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

J'ai essayé d'ajouter une feuille de style en cascade à l table à la table row à la table detail à la asp:GridView et à la GridView de contrôle CssClass .

Peu importe ce que je fais, dès que les données sont liées aux GridView le contrôle remplira complètement le <table> en cachant mes contrôles de recherche dans la première ligne.

Après avoir lu de nombreux autres problèmes connexes en ligne, j'ai pensé que cela pouvait être dû au fait que mon contrôle effectue sa liaison de données dans le code derrière. J'ai donc redessiné ma page ASP.NET pour lier les données dans le code HTML. Le problème est toujours là, mais je n'arrive plus à voir mes contrôles de recherche dans la première ligne.

Quelqu'un sait-il ce qui pourrait causer une telle situation ?

EDIT :

À la demande générale (1 personne), voici le lien vers le projet : >> LIEN << (Toutes les informations binaires ont été supprimées)

Notez toutefois que les fonctions de liaison de données ne fonctionneront pas chez vous.

Answer 1

Jp : J'ai reproduit votre problème avec une page principale, une page de contenu, le même tableau que vous avez ci-dessus et cela ne crée pas ce problème. Veuillez copier votre CSS dans.

Editer, les lignes offensives dans votre CSS sont :

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

Donc, vous dites à tous les Divs d'être positionnés absolument en haut à gauche.

Answer 2

Sans voir un exemple du HTML tel qu'il est rendu, il est difficile de dire ce qui casse la mise en page.

Je m'éloignerais d'une conception basée sur un tableau pour les contrôles de recherche pour quelque chose de ce genre :

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

Avec les styles CSS suivants :

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

Ce violon vous donne une idée de la façon dont il devrait fonctionner

L'ajout des balises d'étiquetage permet également d'obtenir un formulaire plus accessible.

Editar En réponse à votre commentaire, et si vous vous faites imposer la table d'en haut (cela m'est arrivé), n'emboîtez pas les tables.

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

Définir les largeurs de la table de recherche et de la table gridview par CSS comme il convient

Voici également un nouveau violon montrant comment faire cela avec l'option sémantiquement meilleure de l'option fieldset étiquette

J'ai également modifié la largeur des étiquettes et des travées.

Answer 3

Essayez-le sans css. De plus, GridView rend la table html elle-même, ce qui peut causer ce problème. Vérifiez toujours ce qui est dans le html généré, et non ce que vous voyez. Vous obtiendrez toujours une réponse rapide s'il s'agit d'un problème de code ou si les css ne sont pas correctes, si vous cachez un élément, si la hauteur est incorrecte, etc.