Need to reduce vertical height between table and above elements i.e. search bar and add new button

Aditya14

Here is the complete code : <style>
div.dataTables_wrapper div.dataTables_filter {
position: relative;
width: 200px;
height:50px;

}

.top {
    /*position: relative;
    top:-25%;
     float:left;*/
    display: block;
    float: left;
    height:0px;
    width: 100px;
    margin: 50px 60px 30px;



}

#FilterDate {
    position: absolute;
    left: 28%;
    top: 3%;
}

inputTable.table {
    border-width: 1px;
    border-style: solid;
      height:50px;
}

.dataTables_paginate {
    position: relative;
    bottom: 0px !important;


}
.button {
    /*top:-25%;
    left:20%;*/
    display: block;
    float: right;
    }
.table table-striped table-bordered{
    margin-bottom: 60px;
    margin-top:0px;

        }

</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h3>@ViewBag.Title</h3>
<div class="row">
    <div class="col-md-6">
       <div class="button" style="float:right;">
            @Html.ActionLink("Add New", "Create", null, new { @class = "btn btn-primary" })
        </div>
        <table class="table table-striped table-bordered" id="CityTable" >
            <thead>
                <tr>
                    <th>City </th>
                    <th>Country</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
        {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        @*
                            <td>
                               @Html.DisplayFor(modelItem => item.State)
                            </td>
                        *@
                        <td>
                            @Html.DisplayFor(modelItem => item.Country)
                        </td>
                        @*
                            <td>
                               @Html.DisplayFor(modelItem => item.Latitude)
                            </td>
                            <td>
                               @Html.DisplayFor(modelItem => item.Longitude)
                            </td>
                        *@
                        <td>
                            @*@Html.ActionLink("Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-xs btn-default" })*@
                            <a href="#" onclick="return confirmBox($(this).parent(), '@item.Id');" class="btn btn-xs btn-primary" title="Delete">Delete</a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

@Scripts.Render("~/Plugins/datatables/js")

$('.dataTables_filter input[type="search"]'). attr('placeholder', 'Filter By Search...').addClass("form-control").css({ "font-size": "14px"}); $("table#CityTable").dataTable({ "dom": ' <"top"f><"bottom"tp><"clear">', "oLanguage": { "sSearch": '

' }, "autoWidth": true, "pageLength": 10, "pagingType": "full_numbers", "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "height" : "100px" }); $('##CityTable').dataTable({ "bPaginate": $('#CityTable tr').length > 10, "iDisplayLength": 10, "bAutoWidth": false, "aoColumnDefs": [ { "bSortable": true, "aTargets": [0, 2] } ] })

How to reduce the distance above .... i need table to start right after that need no scroll bar

colin

Hi Aditya14,

There's some built in classes that do help reduce space - see this page.

compact is reduced between the elements, and the row spacing is also reduced. You could take that as a starting point and modify to suit your needs.

Cheers,

Colin