Loading...
 

Themes


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?

Phil

Japan

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

{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.)

{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:

@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.

Phil

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.

Phil


Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.