Q:

Arrow & textbox appear disoriented in Tabulator table

The Arrow & textbox for the filter at the header row appears disoriented.

The arrow should appear at the right side and the search box should appear below title.
I am using the below imports in my html file.
<!-- Tabulator -->
<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>

<!-- Jquery & Jquery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Any suggestions why this might be happenning?

A:

That's quite weird because everything is loaded fine. Looks like you'll have to do some post mortem yourself here.
Whenever you have such queries related to unwanted CSS behavior try to inspect that in a browser inspector in a browser. In the Inspector(Firefox) or Elements(chrome) tab you will see styles which are applied to your element.
Try to toggle each style on/off by clicking on the ticks. You'll get what is happening wrong there.

