Get 2025 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(