Spacing Error when using datatables
Hello,
I am using your Laravel Starter Kit with Bootstrap 5 in the latest version. There seems to be an issue when using Bootstrap DataTables with the data-sort attribute. Columns that have data-sort in their td elements receive left space, causing the contents to be shifted to the right.
here my code snippet:<td data-sort="{{$user->last_login_at ? $user->last_login_at->timestamp : $user->updated_at->timestamp}}">{!! sprintf('<div class="badge badge-light fw-bold">%s</div>', $user->last_login_at ? $user->last_login_at->diffForHumans() : $user->updated_at->diffForHumans()) !!} </td>
Please check this.
Thank you very much.
Replies (2)
My bad sorry. The correct would be data-order. It is a Datatable Build In function.
The function is used to store a different value in the cell for sorting purposes than what is visible to the user in the cell. Otherwise, 4 days would be smaller than 4 minutes. So, for example, I use the Unix Timestamp in the data-order.
You mentioned that I should check the HTML code. Here it is:
<td data-order="1711559896" class="dt-type-numeric"><div class="badge badge-light fw-bold">3 months ago</div></td>
I don't see any incorrect HTML elements in it.
If I remove data-order, the content of the cell is significantly more to the left. With the data-order, it is awkwardly pushed to the right, literally.
The first screenshot shows the "Last Login" column with the data-order:
https://snipboard.io/AOLdRn.jpg
The second screenshot shows it without the data-order:
https://snipboard.io/8WbuVI.jpg
Additionally, I noticed another problem.
Datatables have a responsive function, causing columns to disappear under a + symbol.
The problem is, in their design kit, this icon is displayed even when the screen is large enough and all columns can be displayed.
It should only be displayed when the screen is too small and not all columns can be shown. For example, on a mobile phone.
Could you please look into these two issues and address them in an update? The second issue, in particular, would be very helpful for many others if resolved.
Thank you.
Hi Jan Grie
Thank you for reaching out.
Please check the browser's element inspector to see if any unwanted hidden elements might be causing the extra left space in the columns with the data-sort attribute.
By the way, is the data-sort attribute your custom code or Metronic existing code?
If you still encounter issues after checking, please let us know, and we'll be happy to assist you further.
Thanks
