overlapping arrows on column sorting

gib65

Hello,

I'm experiencing some strange overlapping arrows on my DataTable columns. Usually, if you enable sorting on a column, you will get sorting arrows (up and down), but for some reason, on my table, I get arrows that look like the attachment.

There seems to be two sets of arrows per column that overlap.

I'm afraid all I have is the screen capture above. I tried replicating the issue over here:

http://codepen.io/anon/pen/VppeJK

...and here:

http://www.shahspace.com/jquerydatatable/

But to no avail (arrows are fine).

Therefore, my only question is: has anyone seen this happen before, or can anyone guess why it might be happening?

Thanks.

tangerine

The arrow icons in your screenshot are showing correctly. The currently sorted column shows one arrow representing the sort direction. Other columns show what you call "overlapping" arrows indicating that the column is sortable both ways - ascending and descending. That behaviour is actually apparent in your two linked examples, and is equally obvious in the examples on this site.

kthorngren

I've seen this type of behavior when using something like bootstrap and loading the Datatables CSS along with the Datatables Bootstrap CSS. The sorting arrows for both will show. However your samples don't contain any integration CSS files.

Can you provide a link showing the problem?

Kevin

gib65

I commented out the reference to the DataTable CSS and that does seem to remove one of the overlapping arrows. Unfortunately it also removes ALL the CSS for the DataTable.

I've uploaded a screen shot of the "fixed" arrows. Tangerine, if you compare this screen shot to the other one, you should see a slight difference. I know it's subtle but if you look carefully at the first screen shot, you might notice the arrows look a bit "fuzzy". That's the overlap. I've seen cases in my application where the sets of arrows are farther apart and that's when it becomes really noticeable and not professional looking (can't replicate that currently).

Now that I know it's a CSS issue, I'll see about uploading an example with both the DataTable CSS and the Bootstrap CSS.

In the meantime, does anyone know how to suppress the Bootstrap CSS just for this one table?

kthorngren

Here is an example of my CSS includes for Bootstrap:

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <!-- Datatables -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">

Then I load any extensions and Editor if used:

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/css/editor.bootstrap.min.css">

As far as Datatables and Bootstrap thats all I load and I get full functionality using Bootstrap styling.

Kevin

tangerine

Tangerine, if you compare this screen shot to the other one, you should see a slight difference.

OK, now I see it. Sorry I was on the wrong track.

....does anyone know how to suppress the Bootstrap CSS just for this one table?

I'm not sure that's the best solution. You can include DataTables' Bootstrap styling, which should give you what you need. See the download page reference to "styling".
https://datatables.net/download/index