Description of the need
Using CKEditor or not, it's possible to add tables to a textarea (if the filter allows it). It's not hard to make a table not responsive this way, but hard to fix that. Looking online there are different approaches to make a table look better on mobile, but most are fairly bespoke. Looking for a fairly easy way for end users to add tables and have them be responsive.
Proposed solution
What I like about Bootstrap's approach is that it just adds one class so it's easy to make a table look not terrible on mobile. Their approach is to add a wrapping div around the table with the table-responsive
class.
The nice thing is that this approach can be used in addition to the more bespoke approaches (such as turning the table elements into display: block
and hiding the thead
row on small screens).
It would be easy to at least add this to Basis:
.table-responsive {
overflow-x: auto;
position: relative;
}
And perhaps a bit of JS to add the wrapping div around tables like this:
(function ($) {
"use strict";
/**
* Wrap tables in div to make them responsive.
*/
Backdrop.behaviors.tableResponsive = {
attach: function (context, settings) {
$('table', context).once('table-responsive', function () {
var $table = $(this);
$table.wrap('<div class="table-responsive"></div>')
});
}
};
})(jQuery);
The JS could be more selective if needed, though I'm not sure if it is. This would add the div around tables inserted in a textarea as well as tables created with Views.
Alternatives that have been considered
The CKEditor table button could have a "Make table responsive" checkbox which would add the div at the same time. Then the class would need to be in a core module, not Basis. There could also be a separate checkbox in a View when using the table style.
Other
I'm currently using the first approach in a custom theme so a client's site can be more responsive now, but it would be good to have an option in core.
Recent comments
We might want to talk about this issue at the dev meeting (if someone is available to speak to the issue and what needs to be done): Support SVG in Image Library https://github.com/...
Apr 18th Weekly Meetings
I know it's a long and difficult job to make Backdrop known and for people to realize the power (and simplicity) of the product. And I think you do a great job. What I like about Backdrop...
My work and a big thanks to all of you
Looks good. Tres bien! It is definitely worth releasing that. We often have people looking for good simple themes and that is quite a thing of beauty whilst being simple. You're right...
My work and a big thanks to all of you