ARI Soft - Add css lines - ARI Soft Forum

Home

News

Forum

About Us

Demos

Products

F.A.Q.

Featured Demos

ARI Smart Content demo

ARI Quiz demo

WordPress Quiz plugin

WordPress Lightbox plugin

e-mail: info@ari-soft.com

Shopping Cart

You currently have 0 items in your cart.

Show Cart

Recent Events

23/11/2024 Black Friday 2024

BIG SALE, 30% discount for all our extensions. Use BF24 coupon code. Hurry up the discount is valid till 3 December.

more...
31/12/2023 New Year SALE

We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

more...

2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft.

Welcome, Guest
Please Login or Register. Lost Password?

ARI Soft Forum

Joomla components

ARI Data Tables

Add css lines

(1 viewing) (1) Guest

Page: 12

TOPIC: Add css lines

Forum Tools

#72599

Add css lines 2 Months, 3 Weeks ago	Karma: 0
Dear ARISoft, In ARI Datables I want to added a css lines as given in test.css to Ädd style" for realizing a stacked table for mobile screens like Afb1.jpg. But this doesn't work. The td:before and td:nth-of-type(*):before {content in test.css have no effect. Is followed approach the correct way? Could you help me? Best regards, Ben Hillen

HILLEN

The administrator has disabled public write access.

#72600

Re:Add css lines 2 Months, 3 Weeks ago	Karma: 0
now with ZIP File Attachment: File Name: test-5c97da8a533c5dc971878607138ddb0f.zip File Size: 703

HILLEN

The administrator has disabled public write access.

#72601

Re:Add css lines 2 Months, 3 Weeks ago	Karma: 763
Hello, Could you send a link to a page where you try to update the table? It is hard to investigate it because we don't module settings. Regards ARI Soft

admin

The administrator has disabled public write access.

#72602

Re:Add css lines 2 Months, 3 Weeks ago	Karma: 0
Here you are: gregoriusblad.nl/test2

HILLEN

The administrator has disabled public write access.

#72603

Re:Add css lines 2 Months, 3 Weeks ago Karma: 763

Try the following CSS rules:

Code:



/* 

Max width before this PARTICULAR table gets nasty

This query will take effect for any screen smaller than 760px

and also iPads specifically.

*/

@media 

only screen and (max-width: 760px),

(min-device-width: 768px) and (max-device-width: 1024px)  {



	/* Force table to not be like tables anymore */

	.ari-data-tables table, .ari-data-tables thead, .ari-data-tables tbody, .ari-data-tables th, .ari-data-tables td, .ari-data-tables tr { 

		display: block; 

	}

	

	/* Hide table headers (but not display: none;, for accessibility) */

	.ari-data-tables thead tr { 

		position: absolute;

		top: -9999px;

		left: -9999px;

	}

	

	.ari-data-tables tr { border: 1px solid #ccc; }

	

	.ari-data-tables td { 

		/* Behave  like a "row" */

		border: none;

		border-bottom: 1px solid #eee; 

		position: relative;

		padding-left: 50% !important; 

		min-height: 18px;

	}

	

	.ari-data-tables td:before { 

		/* Now like a table header */

		position: absolute;

		/* Top/left values mimic padding */

		top: 6px;

		left: 6px;

		width: 45%; 

		padding-right: 10px; 

		white-space: nowrap;

	}

	

	/*  Label the data  */



	.ari-data-tables td:nth-of-type(1):before { content: "Datum"; }

	.ari-data-tables td:nth-of-type(2):before { content: "Repetitie/Concert"; }

	.ari-data-tables td:nth-of-type(3):before { content: "Peters"; }

	.ari-data-tables td:nth-of-type(4):before { content: "Neue Bach Ausgabe"; }

	.ari-data-tables td:nth-of-type(5):before { content: "Tractant"; }

	.ari-data-tables td:nth-of-type(6):before { content: "Locatie"; }

	.ari-data-tables td:nth-of-type(7):before { content: "Locatie"; }

	.ari-data-tables td:nth-of-type(8):before { content: "Locatie"; }

	.ari-data-tables td:nth-of-type(9):before { content: "Locatie"; }

	.ari-data-tables td:nth-of-type(10):before { content: "Locatie"; }

}

Regards,
ARI Soft

admin

The administrator has disabled public write access.

#72605

Re:Add css lines 2 Months, 3 Weeks ago	Karma: 0
In the small screen all thead's are printed on the same place and are not inserted before the content. I uploaded 2 screenshots: - small - broad Regards, Ben Hillen File Attachment: File Name: Screenshot_small_screen2025_02_04_at_17_54_36_Test2.zip File Size: 519372

HILLEN

The administrator has disabled public write access.

Page: 12

Useful Links