Recent
Categories
View Replies (3)

Responsive Scrolling Tables (Nadia, Joomla 4)

0
Votes
Undo
  1. Forrest Gump
    Forrest Gump
  2. Sherlock Holmes
  3. Commercial Templates
  4. Sunday, 03 December 2023
  5.  Subscribe via email
Hello,

I used the Responsive Scrolling Tables plugin under Joomla 3. This no longer works under Joomla 4.

I have now put my table in a div: <div id="table1"> </div> and copied the following in template style under custom.css:

@media only screen and (max-width:959px){
#table1{overflow-x:auto;}
#table1::before{content:"Scroll right for more ..."; color:black; font-weight:bold;}
}

The text is also displayed but I can't scroll. What am I doing wrong?

Thanks &greetings
Responses (3)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Would you have a URL to an example of your table?

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

You can make your tables slightly more responsive by setting a max width, this way they will adjust to the width of the container. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

table {

    max-width: 100%;

}


It is not possible to set a scroll on a table element with CSS alone but you can it to its container, in this case your accordion body. To amend try also adding the following...

.accordion-body {

    overflow-x: auto !important;

}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Forrest Gump
Forrest Gump
Sherlock Holmes
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Ciaran,

thank you very much for your support. It works perfectly.

Thank you !
  1. more than a month ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!