Search code examples
datatablesbulma

DataTables Search function not aligned to table

I seem to have an issue with the alignment of my search & page function. I am not sure why as I believe I have everything setup correctly. See image below.

Misalignment of Search function

My code for this table is:

<div class="column">
    <table class="table" id="table2">
        <thead>
        <tr>
            <th>Name</th>
            <th>Phone</th>
            <th>Email</th>
            <th>Company</th>
            <th>Contact Frequency</th>
            <th>First Contacted</th>
            <th>Action</th>
        </tr>
        </thead>
        <tbody>
        {% for people in records %}
        <tr>
            <td> {{ people['name'] }}</td>
            <td> {{ people['phone'] }}</td>
            <td><a href="mailto:{{ people['email'] }}">{{ people['email'] }}</a></td>
            <td> {{ people['company'] }}</td>
            <td> {{ people['frequency'] }}</td>
            <td> {{ people['datefc'] }}</td>
            <td><a href="{{ url_for('view', id=people['_id']) }}">View</a> | <a
                    href="{{ url_for('edit', id=people['_id']) }}">Edit</a> | <a href="/deletep/{{people._id}}" onclick="return confirm('Are you sure you want to Remove?');">Delete</a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<Script>
    $(document).ready( function () {
        $('#table2').DataTable();
    } );
</script>
{% endblock %}

EDIT

enter image description here

Solution

  • It's not that your search isn't aligned with the table, but that DataTables hasn't made the table element fill the width of its container for some reason. The fix is add a 100% width to the table element.

    <table class="table" id="table2" style="width: 100%">