jQuery Datatables columnfilter width issue

I am running into an issue where when I apply columnFilter() to jQuery Datatables, the column widths become very large. I have tried using sWidth for each aoColumn with no success. Also, I've turned off bAutoWidth, too, without success.

Here is my dataTable:

oAgentDataTable = $("#agentDataTable").dataTable({
    "bServerSide": true,
    "sAjaxSource": "Agents/GetAgents",
    "bProcessing": true,
    "aoColumns": [
        {
            "mDataProp": "FirstName"
        },
        { "mDataProp": "LastName" },
        {
            "mDataProp": "AnniversaryDate",
            "bSearchable": false,
            "bSortable": false
        },
        { "mDataProp": "Location" },
        {
            "mDataProp": "Active",
            "bSearchable": false
        },
        {
            "mDataProp": "Links",
            "bSearchable": false,
            "bSortable": false,
            "fnRender": function (oObj) {
                return "<input type='hidden' value='" + oObj.aData['ID'] + "'/>";
            }
        }
    ],
    "fnDrawCallback": function (oSettings) {
        $('#agentDataTable tbody tr').each(function () {
            $(this).click(function () {
                // Calls Agent Edit Partial
                $.get("/Agents/Edit/" + $(this).find("td:last input").val(), function (data) {
                    $("#partialContentHolder").html(data);
                    $(".datepicker").datepicker();
                    applyUnPaidFeeDataTable();
                    applayPaidFeeDataTable();
                });
            });
        });
    }
}).columnFilter({
    sPlaceHolder: "head:before",
    "aoColumns": [
        { type: "text" },
        { type: "text" },
        { type: "date-range" },
        { type: "text" },
        {
            type: "select",
            values: ["True", "False"]
        },
        null
    ]
});

Markup:

<table id="agentDataTable">
<thead>
    <tr>
        <th>
            First Name
        </th>
        <th>
            Last Name
        </th>
        <th>
            Anniversary Date
        </th>
        <th>
            Location
        </th>
        <th>
            Both
        </th>
        <th></th>
    </tr>
</thead>
<tbody>
</tbody>
<tfoot>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Anniversary Date</th>
        <th>Location</th>
        <th>Active</th>
        <th></th>
    </tr>
</tfoot>
</table>

Here is the result upon render:

Update:

I figured out what it was. The site.css that asp.net mvc generates had a style for inputs of:

input, textarea {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 5px 0 6px 0;
padding: 5px;
width: 300px;

}