Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

BilalArshad21's avatar

How to increase search filed width?

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.

0 likes
3 replies
tisuchi's avatar
tisuchi
Best Answer
Level 70

@bilalarshad21

You need to add css inside css/jquery.dataTables.css file:

.dataTables_filter input {
    width: 450px !important; 
}
6 likes
reaz's avatar

Just a suggestion: to show the row number, you dont really need an extra variable n, you can just use $loop->iteration inside the loop, it will print current iteration number like 1,2,3

5 likes

Please or to participate in this conversation.