Level 70
You need to add css inside css/jquery.dataTables.css file:
.dataTables_filter input {
width: 450px !important;
}
6 likes
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I would like to know if it's possible to change the width of datatable search filter field this one
I would like to double it's current width
<div class="table-responsive">
<table class="table table-hover" id="myTable">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Added by</th>
<th scope="col">Added at</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody class="custom-tbody">
<?php $n = 1; ?>
@foreach ($authors as $item)
<tr>
<th scope="row">{{ $n++ }}</th>
<td>{{ $item->name }}</td>
<td>{{ $item->user->username }}</td>
<td>{{ $item->created_at }}</td>
<td>
<a href="authors/{{ $item->id }}/edit"
class="btn btn-primary">Edit
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
this is my entire table code using laravel. But I can not find the html of the "search filter field" to increase it's width. datatable.css and datatable.js are in my public folder.
You need to add css inside css/jquery.dataTables.css file:
.dataTables_filter input {
width: 450px !important;
}
Please or to participate in this conversation.