FC777 app login.Claim Your Free 999 Pesos Bonus Today

Resolved

(@akiikiwporg)

Hi Tobias!

I’ve two almost identical tables that behave differently in responsive mode.

1) In the first table, the first two columns fits on a small screen size. This is how I want both tables to display.
2) However, on the second table, only the first column fits on the same screen size.

See this illustration of the issue.

I’ve trying a lot of different CSS selectors, widths, etc., but nothing has worked so far. I might have missed something obvious.

How can I make the second table to display as the first one?

I’m using the same media queries for both tables (besides the table identifier (.tablepress-id-42 or .tablepress-id-43.) This is my CSS for the “misbehaving” table:

/* MEDIA QUERIES */

/* PHONE */
@media screen and (max-width: 768px) and (orientation:portrait) {
  .dataTables_wrapper {
  width: 100% !important; /* the wrapper also controls the search input field */
	}
	.tablepress-id-43 {
  width: 100% !important; /* the data table */
	}
    .tablepress-id-43 .column-1 {
		max-width:100px;
	}
    .tablepress-id-43 .column-3 {
		max-width:100px;
	}
    .tablepress-id-43 .column-4 {
		max-width:100px;
	}
	.none td:first-child {
		width: 80px      
	}
	/*.none td:nth-child(2) {    padding-right: 0px; }*/
	.none td {
    padding-right: 0px !important;
	}
} 
@media screen and (max-width: 768px) and (orientation:landscape) {
	
  .dataTables_wrapper {
  width: 100% !important; /* the wrapper also controls the search input field */
	}
	.tablepress-id-43 {
  width: 100% !important;
	}
    .tablepress-id-43 .column-1 {
		max-width:100px;
	}
    .tablepress-id-43 .column-3 {
		max-width:100px;
	}
    .tablepress-id-43 .column-4 {
		max-width:100px;
	}   
	.none td:first-child {
		width: 80px      
 	}
	/*.none td:nth-child(2) {    padding-right: 0px; }*/
	.none td {
    padding-right: 0px !important;
	}

}

/* TABLET */

@media screen and (max-width: 1025px) {
	
  .dataTables_wrapper {
  width: 100% !important; /* the wrapper also controls the search input field */
	}
	.tablepress-id-43 {
  width: 100% !important;
	}
    .tablepress-id-43 .column-1 {
		max-width:120px;
	}
    .tablepress-id-43 .column-3 {
		max-width:120px;
	}
    .tablepress-id-43 .column-4 {
		max-width:102px;
	}   
	.none td:first-child {
		width: 80px      
 	}
	/*.none td:nth-child(2) {    padding-right: 0px; }*/
	.none td {
    padding-right: 0px !important;
	}

}

/* DESKTOP */

@media screen and (max-width:  10000px) {
	
  .dataTables_wrapper {
  width: 100% !important; /* the wrapper also controls the search input field */
	}
	.tablepress-id-43 {
  width: 100% !important;
	}
	.none td:first-child {
		width: 120px      
 	}
	.none td:nth-child(2) {
    padding-right: 50vw;
	}
	.dtr-details .none {
		max-width: 600px !important;
		}
}

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author TobiasBg
(@tobiasbg)

3 years, 2 months ago
Hi,

thanks for your post, and sorry for the trouble.

I’m afraid that you will most likely not be able to force this with CSS code. The collapse mode seems to have calculated that it can’t fit both column on the small screen at the same time, and therefore it collapses the second column as well.

You could try this with a DataTables “Custom Command”, similar how you are forcing certain columns to always be collapsed. This should be doable by adding
```
{ "className": "all", "targets": [ 2 ] }
```
inside the
```
"columnDefs": [ ... ]
```
array, separated with a comman from the other
```
{ "className": ... }
```
command.

Regards,
Tobias
Thread Starter akiikiwporg
(@akiikiwporg)

3 years, 2 months ago
Thanks Tobias. ??

I added your custom command like this (added part in bold:)

“columnDefs”: [ { “className”: “none”, “targets”: [ 6, 7, 8, 9, 10 , 11, 12, 13, 14, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 ] },{ “className”: “all”, “targets”: [ 0, 2, 3 ] } ], “responsive”: { “details”: { “renderer”: function(api, rowIdx, columns) { let render_method = $.fn.dataTable.Responsive.renderer.tableAll(); return render_method(api, rowIdx, columns.filter(column => column.hidden && column.data) ); } } }

(I changed the [ 2 ] part to [0, 2, 3] to make sure that column 1, 3, and 4 is always visible on a small screen.

The above worked.

A small complication. I have a hidden column: “examples_cvht_tags” (the 2nd column in the table.) This column is normally hidden by CSS code, but now it shows up among the unfolded data. See this image.

This only happens on a small screen size. The hidden column is still hidden on desktop/tablet.

Any fix for this issue?
- This reply was modified 3 years, 2 months ago by akiikiwporg.
Plugin Author TobiasBg
(@tobiasbg)

3 years, 2 months ago
Hi,

you will probably need to hide it with
```
{ "visible": false, "targets": [ 1 ] }
```
(also inside the
```
"columnDefs": [ ... ]
```
) instead of with CSS then.

Regards,
Tobias
Thread Starter akiikiwporg
(@akiikiwporg)

3 years, 2 months ago

Thanks Tobias!

I found a similar use case at DataTables.

I added the following to my Custom Commands (addition in bold:)

“columnDefs”: [ { “className”: “none”, “targets”: [ 6, 7, 8, 9, 10 , 11, 12, 13, 14, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24 ] },{ “className”: “all”, “targets”: [ 0, 2, 3 ] }, {“targets”: [ 1 ], “visible”: false, “searchable”: true}], “responsive”: { “details”: { “renderer”: function(api, rowIdx, columns) { let render_method = $.fn.dataTable.Responsive.renderer.tableAll(); return render_method(api, rowIdx, columns.filter(column => column.hidden && column.data) ); } } }

It seems to work. I added “searchable” because I want to be able to search on the hidden keywords.

The order of the syntax I found are somewhat different compared with yours. Does it matter?

Plugin Author TobiasBg
(@tobiasbg)

3 years, 2 months ago

Hi,

nice! Yes, that looks good! The order of the individual code pieces does not matter here. This is totally fine.
The searchable part might actually not be necessary, because this should be the default already. But you can also leave it in there, it does not hurt.

Regards,
Tobias

Thread Starter akiikiwporg
(@akiikiwporg)

3 years, 2 months ago

Perfect. Thank you so much for your help, Tobias!

Plugin Author TobiasBg
(@tobiasbg)

3 years, 2 months ago

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias
?
P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Width of Columns in Responsive Collapse Mode’ is closed to new replies.