Place sorting arrows to immediate right of label - with Bootstrap 4?

koonkoons

I'm using DataTables with Bootstrap 4
http://live.datatables.net/kifuguti/1/edit

and want to place sorting arrows to immediate right of label.

Googled and found some related articles, for example:

https://www.datatables.net/forums/discussion/25819/place-sort-icon-to-immediate-right-of-label
https://stackoverflow.com/questions/28575810/jquery-datatables-left-align-sort-icon
https://stackoverflow.com/questions/41383641/is-there-any-way-to-display-sorting-icon-next-to-the-header-text-in-jquery-datat

However, it seems these solutions don't work with Bootstrap version of DataTables (the way Datatables puts arrows is different).
Is there a good solution with Bootstrap version of DataTables?

colin

Hi @koonkoons ,

This thread should help, it's asking the same thing - see your updated example here.

Cheers,

Colin

koonkoons

Hi @colin,

Thanks for the reply. Checked the updated example. While the new icons are placed to immediate right of the label, there are the original arrows on the right edge of the column.

I guess I can hide these arrows by setting their opacity to zero, however, is there a way to move them to immediate right of the label?

colin

Hi @koonkoons ,

Ah, yep, I missed that. Did you see the example in the thread I posted, the arrows are behaving as expected in there?

Cheers,

Colin

koonkoons

Hi @colin ,

DataTables in the example in the thread is an old version, which places arrows using CSS's background-image property.
https://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css

On the other hand, the current DataTables (Bootstrap version) places arrows using CSS's content property.
https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.css

I'm struggling with the latter.

allan

I'm not sure that what you are looking for is actually possible with the current CSS I'm afraid. We use ::before and ::after pseudo elements, so if we remove the styling you end up with: http://live.datatables.net/becuhele/1/edit .

I'm not sure if there is a way to make the ::before appear after the cell's content. I'm not aware of a method for that I'm afraid.

Allan

koonkoons

Hi @allan,

Ok, thanks. It seems it's better to stick with the background-image way and disable content like:
http://live.datatables.net/kifuguti/9/edit

I have another question about this example but it's offtopic here, so I'm gonna create a new question thread.

Thanks.

koonkoons

I created a new thread for another question:
https://datatables.net/forums/discussion/56294/api-each-with-tables/