2

I want my label "The Top Row" to be positioned near the top row of my gridview as I indicated with yellow below,

enter image description here

I tried absolute positioning the lable but when displayed, there are problems with it. What is the best way to do this ? (float right is working like allign left which is not useful and I have tried display block but couldn't find a way with it too)

This is such a basic issue but can not find a solution

HOY
  • 1,067
  • 10
  • 42
  • 85
  • 1
    Can you view your generated source markup and post the main elements? – IrishChieftain Apr 16 '12 at 16:30
  • Floating should work. If it isn't, there may not be enough width in the parent container to fit both side by side. Try floating both and reducing the width of the label and grid until they are both side by side. – Jeff Apr 16 '12 at 19:21

3 Answers3

4

You simply need to add float: left to both the <asp:GridView /> and the <asp:Label />:

HTML Markup:

<asp:GridView ID="GridView1" runat="server" CellPadding="10" 
    ForeColor="#333333" style="float: left;" AutoGenerateColumns="False">
    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    <Columns>
        <asp:ButtonField ButtonType="Button" Text="Info File" />
        <asp:ButtonField ButtonType="Button" Text="Get Contact" />
        <asp:BoundField DataField="Column0" HeaderText="Column0" />
        <asp:BoundField DataField="Column1" HeaderText="Column1" />
        <asp:BoundField DataField="Column2" HeaderText="Column2" />
    </Columns>
    <EditRowStyle BackColor="#999999" />
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#E9E7E2" />
    <SortedAscendingHeaderStyle BackColor="#506C8C" />
    <SortedDescendingCellStyle BackColor="#FFFDF8" />
    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<asp:Label ID="TopRowLabel" runat="server" style="float: left;" />

Output:

enter image description here

Code Maverick
  • 20,171
  • 12
  • 62
  • 114
  • intellisense didn't show that style tag was possible to be used, thanks. – HOY May 15 '12 at 12:09
  • 1
    Yea, it doesn't like you to use the style attribute. Instead, it wants you to use the CssClass attribute. You can easily move it to a class in a stylesheet and use the CssClass attribute if you want. – Code Maverick May 15 '12 at 14:56
  • 1
    The only other thing you'll want to make sure you do is wrap the GridView and Label in a div or something with a clearfix CSS class so that the floats are cleared. – Code Maverick May 15 '12 at 14:57
  • After adding float to gridview, I am not able to add something to bottom of the gridview, whatever I add goes to the left of it, do you know how to fix it ? – HOY May 16 '12 at 11:14
  • 1
    The last comment I made before yours is what you need to do. – Code Maverick May 16 '12 at 14:51
  • Thank you, it fixed the issue, I missed it because I didn't understand the term "floats are cleared" at the beggining. – HOY May 17 '12 at 08:51
0

Perhaps you could try to add the style float: left or something similar to the grid?

Also try to experiment with display: block and the other values for display.

kaze
  • 4,299
  • 12
  • 53
  • 74
0

Try using Jquery to find the Header Row and the probably use .Append (to append the element).

If the value of the label/element comes from server then you can set the hidden variable (runat="server") in the code behind and then use Jquery again to set the value of the label (rendered probably as span)

Kunal
  • 1,913
  • 6
  • 29
  • 45