You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#112780 Option to always make a table 'responsive'

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Friday, 13 January 2023 10:00 GMT

jjonker
Hi! Would it be possible to add an option to JCE to automatically wrap a table in a containing div on article save like this:

<div style="overflow-x:auto;">TABLE</div>

This would ensure that the table does not mess up the template layout and also makes sure wide tables can be seen by users with small screens by scrolling horizontally.

Ryan
You can use a Custom Style Format to apply the styled div to any tabel selection.

In Editor Profiles -> Plugin Parameters -> Style Select, create a new Custom Style with a title of, for example "Table Scroll", and set the Tag option to div, and the Styles value to overflow-x:auto, eg:

https://cdn.joomlacontenteditor.net/tmp/112780-option-to-always-make-a-table-responsive.jpg

Then, after inserting the table, click in Table in the Path bar at the bottom of the editor to select the table, and select Table Scoll from the Styles list.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan
An alternative option is to create a Template Item for the Template Manager, that can be selected and inserted from the Template list, for example, in Editor Profiles -> Plugin Parameters -> Template Manager, create a new Template Item, with your table code, eg :

https://cdn.joomlacontenteditor.net/tmp/112780-option-to-always-make-a-table-responsive-2.jpg

Then select and insert from the Template list :

https://cdn.joomlacontenteditor.net/tmp/112780-option-to-always-make-a-table-responsive-3.gif

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

jjonker
Hi Ryan, thanks for these options. It's very useful to know about these features, but in this case I am thinking more along the lines of a global option. Why? Because most of the users that add content to the websites (our clients) will just forget to add a table this way. And the they might create a table width that is then either partly hidden or is popping out of the template, We can tell them to use the template or add the div after creating a template. But most of them will maybe do that once and then forget about it the next time... It's the sad truth ;-) This is why we mostly just disable the table buttons on the editor for site content managers. But finding a way to be able to use tables, but have them sort of 'responsive' would help.

Anyway, we could use jQuery to add this div around all tables inside an article. That would also do the trick. But may a global setting / option would also benefit other users? It's just a thought.

When we use jQuery of javascript to add a div around all tables it might be useful to be able to identify tables created by JCE. With a class maybe? Then we can target only those tables with the script knowing those are the only once created inside articles or modules or other 'content' areas. I don;t think there is a default table class for tables created by JCE at this point?

It; snot a huge issue, but we would like to make thing easy for the content editors as much as possible without having to educate them about all kinds of technical stuff.

Ryan
When we use jQuery of javascript to add a div around all tables it might be useful to be able to identify tables created by JCE. With a class maybe? Then we can target only those tables with the script knowing those are the only once created inside articles or modules or other 'content' areas. I don;t think there is a default table class for tables created by JCE at this point?


In Editor Profiles -> Plugin Parameters -> Tables, add an appropriate value to the Classes field, eg: table-scroll, and this will be applied to all new tables inserted into the editor using the Table Grid dropdown or Table dialog.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.