Jump to content

Featured Replies

Posted

@Ehren

What's the best way to display tabular data on IPS5? I'm trying this:

		<table class='ipsTable ipsTable_responsive ipsTable_zebra {{foreach $table->classes as $class}}{$class} {{endforeach}} ipsBox ipsBox--child' data-role="table" data-ipsKeyNav data-ipsKeyNav-observe='e d return'>
			<thead>
				<tr>
					<th class="ipsPadding_left:half" style="width: 30%">{lang="name"}</th>
					<th class="ipsPadding_left:half" style="width: 15%">{lang="joined"}</th>
					<th class="ipsPadding_left:half" style="width: 15%">{lang="content_count"}</th>
					<th class="ipsPadding_left:half" style="width: 15%">{lang="date"}</th>
					<th class="ipsPadding_left:half" style="width: 25%">{lang="entries"}</th>
				</tr>
			</thead>
			<tbody data-role="tableRows">
				{template="$table->rowsTemplate[1]" params="$table, $headers, $rows" object="$table->rowsTemplate[0]"}
			</tbody>
		</table>

But it isn't responsive at all. Mobile view is a disaster.

Any suggestions?

 

@Ehren

What's the best way to display tabular data on IPS5? I'm trying this:

		<table class='ipsTable ipsTable_responsive ipsTable_zebra {{foreach $table->classes as $class}}{$class} {{endforeach}} ipsBox ipsBox--child' data-role="table" data-ipsKeyNav data-ipsKeyNav-observe='e d return'>
			<thead>
				<tr>
					<th class="ipsPadding_left:half" style="width: 30%">{lang="name"}</th>
					<th class="ipsPadding_left:half" style="width: 15%">{lang="joined"}</th>
					<th class="ipsPadding_left:half" style="width: 15%">{lang="content_count"}</th>
					<th class="ipsPadding_left:half" style="width: 15%">{lang="date"}</th>
					<th class="ipsPadding_left:half" style="width: 25%">{lang="entries"}</th>
				</tr>
			</thead>
			<tbody data-role="tableRows">
				{template="$table->rowsTemplate[1]" params="$table, $headers, $rows" object="$table->rowsTemplate[0]"}
			</tbody></table>

But it isn't responsive at all. Mobile view is a disaster.

Any suggestions?

Try add

<div class="ipsTableScroll">
	<table class="......"
</div>

At least it works for me when I use it this way, I don't know if this is what you need.

Recently Browsing 0

  • No registered users viewing this page.