bootstrap responsive tables in the split plugin

I have used the split plugin extensively on my web site, mostly to position text to the left or right of an image. This is still fine on a desktop browser, but not so good on a phone.

From my point of view it would makes sense if the split plugin (or another plugin) used bootstrap responsive tables in it's layout.

Are there any plans in this direction?

Would it be technically difficult?



The design philosophy of Bootstrap is to stack page parts vertically in small screens that are too wide to fit side by side, so it would be better to replace the table made by the split plugin with Bootstrap grid elements, for example.

So instead of the split table, the page would use something like

Copy to clipboard
{DIV(class="row")} {DIV(class="col-sm-6")} column one content {DIV} {DIV(class="col-sm-6")} column two content {DIV}{DIV}

But a Tiki plugin hasn't been made yet to insert this, unfortunately. For now, if you don't want to edit pages to replace the split tables with code like that, you could just add a div class="table-responsive" around each split plugin, and this will at least enable scrolling the table horizontally in a small screen. (I assume this will work - I haven't tested it; sometimes nested plugins don't work as expected.)

Copy to clipboard
{DIV(class="table-responsive")} {SPLIT} ... {/SPLIT} {DIV}

I think it should be pretty easy to update the SPLIT plugin to be responsive in this way. Both this change and a new plugin to create actual responsive columns should be added to the Tiki plugins.

-- Gary

Thanks for the quick reply.

I took a look at the source code for the split plugin and started experimenting with a copy (which I initially called bootsplit). I'm pretty sure I will be able to get it working.

I know there are solutions where the table scrolls horizontally, but I don't want that.

I found another solution using display:block.
Based on an example here I put the following into my style sheet:

Copy to clipboard
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } 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; } }

This more or less worked, except that the SPLIT plugin had inserted width="50%". I ended up with cells vertically arranged, but still only 50% of the screen width.


I have written a new plugin, which I have tentatively named FluidGrid and committed it to the trunk. The usage is very similar to the split plugin.


Upcoming Events

Tiki birthday
2)  19 Oct 2023 14:00 GMT-0000
Tiki Roundtable Meeting - October
3)  16 Nov 2023 14:00 GMT-0000
Tiki Roundtable Meeting - November
4)  21 Dec 2023 14:00 GMT-0000
Tiki Roundtable Meeting - December
5)  18 Jan 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  15 Feb 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7)  21 Mar 2024 14:00 GMT-0000
Tiki Roundtable Meeting
8)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting