Set GridView Width using Bootstrap and CSS in ASP.Net

anjali600
 
on Sep 17, 2021 10:57 PM
Sample_206979.zip
684 Views

I want to make the GridView in asp.net web forms little bit wider using bootstrap style sheets.

When I increased the width of GridView to 100% then I don’t see any change in the width of the GridView.

I also tried to put w-100, but that also didn’t make much difference.

Below is my GridView.

<div class="row justify-content-center">
    <asp:GridView ID="grdCalculate" runat="server" GridLines="Horizontal"   
        CssClass="table w-100  table-responsive-xl" OnRowDataBound="grdCalculate_RowDataBound"    >
    </asp:GridView>
</div>

When I put the wrapper of table responsiveness I get the border for the full width of the table, but the actual grid is squished in the corner of the table outline.

I just want to center the table and make the table slightly smaller than the outline.

any help will be highly appreciated.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 18, 2021 03:50 AM

Refer below code.

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
    integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<style type="text/css">
    .table-responsive {
        display: inline-table !important;
    }
</style>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-6">
            <asp:GridView ID="grdCalculate" runat="server" GridLines="Horizontal"
                CssClass="table table-responsive" Width="100%">
            </asp:GridView>
        </div>
    </div>
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("Calculation"), new DataColumn("Value") });
        dt.Rows.Add("Test 1", 1235);
        dt.Rows.Add("Test 2", 66666);
        dt.Rows.Add("Test 3", 9999);
        dt.Rows.Add("Test 4", 666555);
        grdTest.DataSource = dt;
        grdTest.DataBind();

        grdCalculate.DataSource = dt;
        grdCalculate.DataBind();
    }
}