Styling Error in FireFox with jQuery DataTables

Question

I am implementing datatables with a table I currently have, however in Chrome and IE it loads correctly looking like: chrome and ie loads right Larger pic: https://i.sstatic.net/g34TG.png

However when I use Firefox it looks like this: surprisingly firefox messes up Larger pic: https://i.sstatic.net/taRUN.png

It looks like the plugin is not creating a new line after "Show X Entries."

The table is set for Width="100%". The jquery is as follows:

$(document).ready(function () {
    var oTable = $('#table1').dataTable({
    "bStateSave": true,
    });
});

The table is created as follows:

<table id="table1" border="0" style="width:100%;">
    <thead>
        <tr>
            <td>ID</td><td>UserName</td><td>Sample Stuff</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1234</td><td>user1</td><td>random stuff</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <span>
                    <input type="text"  size="11" placeholder="Filter ID"/>
                </span>
            </td>
            <td>
                <span>
                    <input type="text"   size="10" Placeholder="Filter Username" />
                </span>
            </td>
            <td>
                <span>
                    <input type="text"  size="4"  Placeholder="Filter SampleStuff"/>
                </span>
            </td>
        </tr>
    </tfoot>
</table>

Any ideas on why this is happening? I have looked into other alternatives vs Datatables, but datatables looks like the best to use.

Dru · Accepted Answer · 2012-07-27 09:15:23Z

4

Try this "sDom": 'T<"clear">lfrtip', where clear will clear the floats

$(document).ready(function () {
    var oTable = $('#table1').dataTable({
    "sDom": 'T<"clear">lfrtip',
    "bStateSave": true,
    });
});

answered Jul 27, 2012 at 9:15

Dru

5564 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Styling Error in FireFox with jQuery DataTables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related