How to make gridview and cells bigger?


Tags: c#,css,asp.net,gridview

Problem :

I want to make my ASP gridview wider and the cells bigger. I've tried some sh*t with width and cellspacing/cellpadding, none of it worked.

How it looks : http://prntscr.com/7dobyg

How it pretty much should look like : http://prntscr.com/7dobor

The gridview :

<div class="content">
<%-- GridView --%>
<asp:UpdatePanel ID="pnlGVList" runat="server">
    <ContentTemplate>
        <asp:GridView runat="server" ID="gridList" CellPadding="40" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False" DataSourceID="DSList" AllowPaging="True" PageSize="50">

            <AlternatingRowStyle BackColor="White" ForeColor="#284775"></AlternatingRowStyle>

            <Columns>
                <asp:BoundField DataField="positie" HeaderText="Positie" SortExpression="positie"></asp:BoundField>
                <asp:HyperLinkField DataNavigateUrlFields="artiestid" DataNavigateUrlFormatString="Artists.aspx?id={0}" DataTextField="naam" HeaderText="Naam" />
                <asp:HyperLinkField DataNavigateUrlFields="songid" DataNavigateUrlFormatString="Song.aspx?id={0}" DataTextField="titel" HeaderText="Titel" />
                <asp:BoundField DataField="jaar" HeaderText="Jaar" SortExpression="jaar"></asp:BoundField>
            </Columns>

            <EditRowStyle BackColor="#999999"></EditRowStyle>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></FooterStyle>
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></HeaderStyle>
            <PagerStyle HorizontalAlign="Center" BackColor="#284775" ForeColor="White"></PagerStyle>
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333"></RowStyle>
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333"></SelectedRowStyle>
            <SortedAscendingCellStyle BackColor="#E9E7E2"></SortedAscendingCellStyle>
            <SortedAscendingHeaderStyle BackColor="#506C8C"></SortedAscendingHeaderStyle>
            <SortedDescendingCellStyle BackColor="#FFFDF8"></SortedDescendingCellStyle>
            <SortedDescendingHeaderStyle BackColor="#6F8DAE"></SortedDescendingHeaderStyle>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

<asp:SqlDataSource runat="server" ID="DSList" ConnectionString='<%$ ConnectionStrings:TOP2000_IAO4A_GROEP2ConnectionString %>' SelectCommand="sp_top2000_year" SelectCommandType="StoredProcedure">
    <SelectParameters>
      <asp:ControlParameter ControlID="ddlJaar" PropertyName="SelectedValue" DefaultValue="" Name="YEAR" Type="Int32"></asp:ControlParameter>
    </SelectParameters>
</asp:SqlDataSource>
  </div>

Some css:

#gridList {
margin:50px;
width:2000px;
}

.content {
margin-top: 30px;
margin-left: 300px;
margin-right: 40px;
height: 100vh;
background-color: white;
box-shadow: 0px 0px 1px 1px black;
}


Solution :

You are applying margin and paddings with content css class to the div, not to the Row.

You could create a css class for your RowStyle and apply something like this:

<RowStyle CssClass="myRowStyleClass"></RowStyle>

And remove the CellPadding from the GridView.


    CSS Howto..

    how to fit the original text format of a paragraph into the html paragraph element using jquery?

    How to get same effect as jQuery's slideToggle using CSS 3 transitions?

    How to prevent outside CSS from adding and overriding ReactJS component styles

    How is it possible to modify the gap between a bullet and its list text?

    How to show a title in the border of a div [duplicate]

    How to animate text with css font-weight property in jQuery ? normal to bold

    How to keep the navbar fixed to top in big screens only using jquery

    How to make a progress bar like this in CSS

    How to make the click logo appear without a href in css/html?

    How to use CSS in ASP.NET application

    How to reposition a div

    how to hover after calling jquery animate()

    How to refresh div using ajax refresh?

    How to put bull inside css circle

    How do I style a different border?

    How to replicate the styling of html heading tags

    How do I specify my image's position?

    Css selector : How to reference a attribute inside a div

    Bootstrap: Background image z-index to show it above bg color

    How to add hover text on D3 disign?

    How to escape quotes in Less variable which stores a color name?

    How do I make text and other items look like chalk without a specialized font using only HTML and CSS? [closed]

    How to position a set in Raphael SVG?

    How to remove last TD in first LINE

    How to make each element to be fully independend with CSS?

    how to bold words within a paragraph in HTML/CSS?

    How to vertically center text next to a radio button

    Is this how CSS LESS and SimpLESS work? [closed]

    How to make a div with arrowlike side without css border tricks?

    how to center an item when it's the only one in a multi-column layout