Jilicolor test.Makakuha ng libreng 700pho sa bawat deposito

Resolved

(@imincognito)

Hey Tobias,

I’m trying to do the following:
– set a fixed height for all rows in the body.
– force word wrap for all columns.
– desktop – vanilla TP
– mobile and tablet – collapse mode

I’ve got TP +
– Change DataTables strings
– Fixed Columns
– Fixed Header
– Responsive

My desktop shortcode is:
[table id=4 datatables_fixedcolumns_left_columns=1/]

My mobile/tablet shortcode is:
[table id=4 responsive = collapse responsive_breakpoint=”tablet”/] – OR –
[table id=4 datatables_fixedcolumns_left_columns=1 responsive = collapse responsive_breakpoint=”tablet”/]

Custom CSS is listed below.

– Desktop works fine.
– But I can’t seem to get collapse to work w/ mobile or tablet.

I recall that, in the past, you’ve mentioned sth about combining options for mobile, so I’ve tried both options above (ie. with and without fixed column).

3 questions (sorry for overloading):
1. Any idea why collapse is not working on mobile?
2. Where can I change the breakpoints for mobile and tablet?
3. When I do collapse, how can set the effective row height (or is it grandfathered from pre-collapse row height)?

Thx!

CSS

/* TABLEPRESS - COMMON - TIMELINE */
/* DESKTOP */
@media only screen 
and (min-device-width : 992px) 
and (max-device-width : 9999px) 
	{
			
    .tablepress-common-timeline .column-1
		{
		min-width: 75px !important;
		max-width: 75px !important;
		}

	.tablepress-common-timeline .column-2
		{
		min-width: 150px !important;
		max-width: 150px !important;
		}
      
    .tablepress-common-timeline .column-3
		{
		min-width: 400px !important;
		max-width: 400px !important;
		}
      
	.tablepress-common-timeline tbody > tr 
		{
			height: 200px!important;
			max-height: 200px!important;
		}
}

/* TABLET AND MOBILE */
@media only screen 
and (min-device-width : 1px) 
and (max-device-width : 991px) 
	{
		
    .tablepress-common-timeline .column-1
		{
		min-width: 75px !important;
		max-width: 75px !important;
		}

	.tablepress-common-timeline .column-2
		{
		min-width: 200px !important;
		max-width: 200px !important;
		}
      
    .tablepress-common-timeline .column-3
		{
		min-width: 400px !important;
		max-width: 400px !important;
		}
		
	.tablepress-common-timeline tbody > tr 
		{
			height: 200px!important;
			max-height: 200px!important;
		}
      
}

/* COMMON - DESKTOP, TABLET AND MOBILE */
.tablepress-common-timeline tbody td
	{
  	white-space: normal;
	word-break: normal;
	/* 
	overflow: hidden; 
	*/
	}

.tablepress-common-timeline th
	{
	text-align: center;
	}

.tablepress-common-timeline tbody > tr .column-2
	{
	text-align: left;
	}

.tablepress-common-timeline tbody > tr .column-3
	{
	text-align: left;

	}

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

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

Thread Starter imincognito
(@imincognito)

2 years, 6 months ago

Tobias,

Update / Additional Trou9bleshooting (based on other threads)

– turned off horiz scrolling
– added
.tablepress {
table-layout: normal;
}

Neither of these help.

Plugin Author TobiasBg
(@tobiasbg)

2 years, 6 months ago

Hi,

thanks for your post, and sorry for the trouble.

From everything I know about this, from https://datatables.net/download/compatibility , using the collapse mode (which relies on the DataTables Responsive Extension, is not compatible with the FixedColumns features. Thus, you can not use these at the same time, I’m afraid.

Regards,
Tobias

Thread Starter imincognito
(@imincognito)

2 years, 6 months ago

Tobias,

Thx for the quick reply.

I forgot to note this in my post, but I already tried removing the FixedColumn option and that doesn’t seem to help.

I know collapse works – I’ve used it before but I can’t remember what the exact config is. From static page dev where I’ve used the datatables js plugin, I know that it can be a bit touchy when it comes to combinations of features…TBH, I think the core jquery foundation is due for a rewrite…:>)

But in the meantime, if you can think of any other possible cause, I’d greatly appreciate it!

Thread Starter imincognito
(@imincognito)

2 years, 6 months ago

Tobias,

Some progress. Looks like there was a cache issue. Collapse now works, but…

the collapsed column seems to have a mind of its own re col width – column 3, which is descriptive text (fairly long), is not picking up the min-width value.

Do I need a special (separate) min-width value for expanded columns in mobile?

Or is the problem with datatables assuming that all columns will fit horizontally in a mobile viewport when a row is expanded (and the columns are displayed vertically)?

Thx again…

Plugin Author TobiasBg
(@tobiasbg)

2 years, 6 months ago

Hi,

good to hear that it’s working now!

On the jQuery foundation: That’s probably true, but not in my hands, as I’m not the DataTables developer ??

For that min-width issue: I’m not sure what you mean, and I can’t really check it, as the FixedColumns still is active for me…

Regards,
Tobias

Thread Starter imincognito
(@imincognito)

2 years, 6 months ago

That’s really strange –

Note that I’m using Elementor and for some widgets, including TablePress, I use 2 separate instances (of each widget/shortcode). So if you’re seeing FixedColumns as active, it may be that you are on a desktop and just resizing the window…

Here is the shortcode for desktop:
[table id=4 datatables_fixedcolumns_left_columns=1 datatables_fixedheader=top datatables_fixedheader_offsettop=100/]

Here is the shortcode for tablets/mobile:
[table id=4 responsive = collapse datatables_fixedheader=top datatables_fixedheader_offsettop=60/]

Plugin Author TobiasBg
(@tobiasbg)

2 years, 6 months ago

Hi,

this likely has the same causes as in the new thread that you opened at https://www.ads-software.com/support/topic/fixed-header-32/, so let’s continue the discussion there.

Regards,
Tobias

Thread Starter imincognito
(@imincognito)

2 years, 6 months ago

Hi

I already closed that thread.

Again, I’m not using fixed columns for tablets/mobile, so I’m confident that’s not the issue.

Pls let me know if you’re still seeing fixed columns for mobile – you may need to clear your local cache since I did have it in there originally.

Thx

Plugin Author TobiasBg
(@tobiasbg)

2 years, 6 months ago

Hi,

no, it’s likely not the FixedColumns then. But still, please turn off JS file concatenation/minification/caching, to rule out any interference from that.

Regards,
Tobias

Thread Starter imincognito
(@imincognito)

2 years, 6 months ago

sorry – in tablepress or…?

Plugin Author TobiasBg
(@tobiasbg)

2 years, 6 months ago

Hi,

no, I mean the plugin that you are using for that, Asset Cleanup or something similar.

Regards,
Tobias

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

The topic ‘Fixed Row Height – Desktop vs Mobile’ is closed to new replies.