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

  Wednesday, 11 January 2023
  4 Replies
  400 Visits
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.
3 weeks ago
·
#112793
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.

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

3 weeks ago
·
#112795
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

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

2 weeks ago
·
#112797
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.
2 weeks ago
·
#112798
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.

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

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