asp:gridview header vertical alignment using css

Question

I am trying to align my grid view vertically using css but the problem is when I do that the data fields goes under the header fields instead of being parallel to it.

what I need is:

HEADER1 : DATA FIELD1

HEADER2 : DATA FIELD2

HEADER3 : DATA FIELD3

But what I get is:

HEADER1

HEADER2

HEADER3

DATA FIELD1

DATA FIELD2

DATA FIELD3

look at the image for better understanding.

Please help me fix it.

CSS:

.ChildGrid td{
  background-color: #eee !important;
  color: black;
  font-size: 10pt;
  line-height:200%;
}
.ChildGrid th{
  background-color: #6C6C6C !important;
  color: White;
  font-size: 10pt;
  line-height:200%;
}
table.ChildGrid, table.ChildGrid tr, table.ChildGrid td, table.ChildGrid th{
  display:block
}

HTML:

<asp:GridView ID="gvSDate2" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid">

  <Columns>
    <asp:TemplateField ItemStyle-Width="150px" HeaderText="ID">
      <ItemTemplate>
        <asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>' />
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField ItemStyle-Width="150px" HeaderText="நிகழ்ச்சி">
      <ItemTemplate>
        <asp:TextBox ID="textFunction" runat="server" Text='<%#Eval("Function") %>' />
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField ItemStyle-Width="150px" HeaderText="நிகழ்ச்சி தேதி">
      <ItemTemplate>
        <asp:TextBox ID="textFunctionDate" runat="server" Text='<%#Eval("FunctionDate") %>' />
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

try to use HeaderStyle-CssClass in gridview and add a css class to make it align in same line — Tummala Krishna Kishore
– Tummala Krishna Kishore, Commented Aug 9, 2016 at 5:04
ok I've added the css class can you please help me with the exact css code to align it with the data field? — prkash
– prkash, Commented Aug 9, 2016 at 5:09
if you can paste rendered mark up then it will be easier to answer — Imad
– Imad, Commented Aug 9, 2016 at 5:31

codeandcloud · Accepted Answer · 2016-08-09 05:51:45Z

1

You are using the wrong datapresentation control here. What you ideally need is a asp:DetailsView. You can use it like this.

<asp:DetailsView ID="FunctionDetails" runat="server" 
    AutoGenerateRows="False" 
    DataKeyNames="ID"
    HeaderText="Author Details">
    <Fields>
        <asp:TemplateField ItemStyle-Width="150px" HeaderText="ID">
            <ItemTemplate>
                <asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>'>
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-Width="150px" HeaderText="நிகழ்ச்சி">
            <ItemTemplate>
                <asp:TextBox ID="textFunction" runat="server" 
                    Text='<%#Eval("Function") %>'>
                </asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ItemStyle-Width="150px" HeaderText="நிகழ்ச்சி தேதி">
            <ItemTemplate>
                <asp:TextBox ID="textFunctionDate" runat="server" 
                    Text='<%#Eval("FunctionDate") %>'>
                </asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Fields>
</asp:DetailsView>

answered Aug 9, 2016 at 5:51

codeandcloud

55.6k47 gold badges169 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

prkash Over a year ago

ok ill try this method but will i be able to use update button on this one?

prkash Over a year ago

ok but this is a nested gridview which gets the data from the backend code and im afraid it would mess it all up but ill try anyway and see

Rojalin Sahoo Over a year ago

You Could use Repeater control and set the attribute RepeatDirection="Horizontal". May Help you.

prkash · Accepted Answer · 2016-08-09 09:40:26Z

i tried something else instead of working on CSS

<asp:GridView ID="gvSDate2" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid" OnRowUpdating="updategvSDate2">
    <Columns>
      <asp:TemplateField>
        <ItemTemplate>
          <table width="100%" cellpadding="2" cellspacing="2">
            <tr>
            <th>ID</th>
            <td><asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>' /></td>
            </tr>
            <tr>
            <th>நிகழ்ச்சி</th>
            <td><asp:TextBox ID="textFunction" runat="server" Text='<%#Eval("Function") %>' /></td>
            </tr>
            <tr>
            <th>நிகழ்ச்சி தேதி</th>
            <td><asp:TextBox ID="textFunctionDate" runat="server" Text='<%#Eval("FunctionDate") %>' /></td>
            </tr>
            <tr>
            <th>நிகழ்ச்சி நேரம்</th>
            <td>
            <asp:DropDownList ID="textFunctionTime" runat="server" Text='<%#Eval("FunctionTime") %>'>
               <asp:ListItem Value="">--Select--</asp:ListItem>
               <asp:ListItem Value="காலை 05:00AM - 01:00PM">காலை 05:00AM - 01:00PM</asp:ListItem>
               <asp:ListItem Value="மாலை 02:00PM - 10:00PM">மாலை 02:00PM - 10:00PM</asp:ListItem>
               <asp:ListItem Value="முழு நாள் 05:00AM - 10:00PM">முழு நாள் 05:00AM - 10:00PM</asp:ListItem>
            </asp:DropDownList></td>
            </tr>
         </table>
       </ItemTemplate>
     </asp:TemplateField>
     <asp:ButtonField CommandName="Update" Text="Update" />
   </Columns>
</asp:GridView>

now my table looks like this

thanks Naveen i got this idea from the link you sent

Collectives™ on Stack Overflow

asp:gridview header vertical alignment using css

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related