Strange bar under the title of the columns

Hi Aralize,

Can you share a public link? It often helps if I can view the HTML and CSS.

Thanks,
Peter

Hi Peter,

Here is the site link (this is a site for my testing).
https://testbrick.000webhostapp.com/

Thank you.`

Hi,

The problem only occurs when I enable the “ordering” option for the columns. This is an option that is important to me, I must leave it …

Hi Aralize,

Thanks for sharing the link! It looks like there are three tables on this page. The first two table are static tables. The third table is a publication. When you remove the second table, the header looks fine. You just need to add the labels I think? Or change the CSS for your second table and remove the border-bottom from: table.dataTable thead tr th, table.dataTable thead tr td

Does this help?
Peter

Hi Peter,

I tried again and the problem occurs when I check the option “allow ordering” and add the command to get an scroll X.

If I don’t put scroll X, I don’t have this problem, but the table is way too wide on both PC and smartphone. You can see this currently on the site.

I tried several advanced options for the scroll:
-scrollX : true
-scrollX : “800px”

Maybe I’m making a mistake in the advanced scroll X command?
Currently I put this (in table options advanced in data publisher of the table) and I plan to add this command to the line below :
{
“dom”:”lfrtp”,
line for the scroll X command
}

Thanks.

Hi Aralize,

Please edit your publication:
– set output to: Responsive
– set number of columns to: 0
– set type to: Modal

Your publication will be resized to fit on smaller devices.

Please let me know if this works,
Peter

Hello Peter,

With this setting, there is no more overflow, but a column is missing on a computer display and 7 columns on a smartphone.
Therefore, it is necessary that I put a horizontal scrollbar, but it causes the problem with the icons for sorting the columns.

Thanks.

Aralize.

Hi Aralize,

Your publication looks correct to me now. Please be aware that the layout is not always redrawn correctly when you interactively change your browser width. You need to refresh the page to force a recalculation of the table and column width. This is perfectly fine as users will normally not resize their browser on smaller devices. Can I close this topic?

Best regards,
Peter

Peter,

No it’s not good, the display of several columns is missing.
Whether on a computer or even on a “real” phone.
I also tried with several internet browsers and cleared the caches.

Best regards,

Hi Aralize,

You need to click on the first column to make the hidden columns visible. You should see a plus icon in the first column which indicates there is more. Is the show icon field set to “No” in the publication type block? If so, please set it to “Yes”.

Does this help?
Peter

Hi,

Yes, indeed I saw that, but if we want to order the data according to the columns which are not displayed, this system does not work.
Isn’t there a possibility to put a bar for the horizontal scroll?

I think it is necessary to use the function of “responsive.recalc” but I have no idea how to set this up …
https://datatables.net/reference/api/responsive.recalc ()

A similar problem: https://stackoverflow.com/questions/33312096/datatable-columns-dont-line-up-with-scroll-bars

Hi Aralize,

You can use the following javascript to recalculate the with for your publication:
jQuery(“#BDD2”).DataTable().responsive.recalc()

But it does not seem to work. Did you change it back to flat?

Thanks,
Peter

Hi,

Yes, I returned to “flat” to test. I just put in “Responsive”.
Where should I put this line of Jquery code? In which file exactly?

Thanks.

Hi again,

With my latest modifications, it’s almost good. So that everything is correctly aligned (head and body of the table) you have to click a first time on the sort of columns.
Is there a solution to avoid this manipulation? Do a new ordering automatically after the first load of the table?

My parameters currently :

{
"dom":"lfrtp",
"rowReorder": true,
"ordering": true,
"scrollX":true,
	"columnDefs": [
	{"className": "dt-center", "targets": "_all"}, 		
	{ "orderable": false,  "targets": 0 }       
      ],
"order": [ 0, "asc" ]
}

Output : responsive
Number Of Columns : 9 (if I put 0, it does not display all the columns)
Type : modal

Thanks again.

Aralize