Home News Contact Us Forum About Us Demos Products F.A.Q.
ARI Soft









Register   Lost Password?
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. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?
Go to bottomPage: 12
TOPIC: Add css lines
#72599
Add css lines 3 Months, 2 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
User Offline Click here to see the profile of this user
The administrator has disabled public write access.
 
#72600
Re:Add css lines 3 Months, 2 Weeks ago Karma: 0
now with ZIP
File Attachment:
File Name: test-5c97da8a533c5dc971878607138ddb0f.zip
File Size: 703
HILLEN
User Offline Click here to see the profile of this user
The administrator has disabled public write access.
 
#72601
Re:Add css lines 3 Months, 2 Weeks ago Karma: 764
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
User Offline Click here to see the profile of this user
The administrator has disabled public write access.
 
#72602
Re:Add css lines 3 Months, 2 Weeks ago Karma: 0
Here you are: gregoriusblad.nl/test2
HILLEN
User Offline Click here to see the profile of this user
The administrator has disabled public write access.
 
#72603
Re:Add css lines 3 Months, 2 Weeks ago Karma: 764
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
User Offline Click here to see the profile of this user
The administrator has disabled public write access.
 
#72605
Re:Add css lines 3 Months, 2 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
User Offline Click here to see the profile of this user
The administrator has disabled public write access.
 
Go to topPage: 12
ARI Soft Forum
Joomla components
ARI Data Tables
Powered by Kunenaget the latest posts directly to your desktop
Useful Links
Products
F.A.Q.
Discount
RSS
Top Products
ARI Data Tables
ARI Sexy Lightbox
ARI Quiz
ARI Stream Quiz - Personal
ARI Smart Content
Help
Forum
F.A.Q.
Home | News | Contact Us | Forum | About Us | Demos | Products | F.A.Q.
ARI Soft
License | Terms and Conditions | Copyright Info | Privacy Policy
 
ARI Soft
Copyright © 2009