Joomla! Issue Tracker | Joomla! CMS #22444 - Change responsive layout for repeatable-table.

Fixed in Code Base
3 Oct 2018
Medium
Build: staging
# 22444
Harmageddon:subform_table_vertical_layout

Harmageddon
1 Oct 2018

Pull Request for Issue #20210 / replacement PR for #22335 .

Summary of Changes

Fixes the padding and spacing bugs for different window sizes for the repeatable-table layout for subform fields by using a vertical form instead of a horizontal one.
Uses responsive tables displaying the table header in the left column for narrow screens.

Testing Instructions

Please test different subforms with layout="joomla.form.field.subform.repeatable-table", some of them with groupByFieldset="true" and some without it. You can do this by manipulating some module's XML manifest I used the following forms:

<field
	name="entries"
	type="subform"
	formsource="subform"
	multiple="true"
	label="Subform"
	layout="joomla.form.field.subform.repeatable-table"
	groupByFieldset="true"
	min="1"
	>
	<fieldset label="private" name="private">
		<field
			name="num1"
			type="text"
			label="Number 1"
			filter="int"
		/>
		<field
			name="mail1"
			type="text"
			default=""
			label="Mail 1"
			validate="email"
		/>
	</fieldset>
	<fieldset label="office" name="office">
		<field
			name="num2"
			type="text"
			label="Number 2"
			filter="int"
		/>
		<field
			name="mail2"
			type="text"
			default=""
			label="Mail 2"
			validate="email"
		/>
	</fieldset>
	<fieldset label="mobile" name="mobile">
		<field
			name="num2"
			type="text"
			label="Number 3"
			filter="int"
		/>
		<field
			name="mail2"
			type="text"
			default=""
			label="Mail 3"
			validate="email"
		/>
	</fieldset>
</field>
<field name="subform1" type="subform" label="subform"
	layout="joomla.form.field.subform.repeatable-table" multiple="true"
	groupByFieldset="true" min="1">
	<form>
		<fieldset name="group1" label="group 1">
			<field type="text" name="text" label="text 1"/>
			<field type="text" name="text2" label="text 2"/>
			<field type="text" name="text3" label="text 3"/>
		</fieldset>
		<fieldset name="group2" label="group 2">
			<field type="text" name="text4" label="text 4"/>
			<field type="textarea" name="textarea" label="textarea"/>
		</fieldset>
	</form>
</field>
<field name="subform2" type="subform" label="subform"
	   layout="joomla.form.field.subform.repeatable-table" multiple="true" min="1">
	<form>
		<fieldset name="group1" label="group 1">
			<field type="text" name="text" label="text 1"/>
			<field type="text" name="text2" label="text 2"/>
			<field type="text" name="text3" label="text 3"/>
		</fieldset>
		<fieldset name="group2" label="group 2">
			<field type="text" name="text4" label="text 4"/>
			<field type="textarea" name="textarea" label="textarea"/>
		</fieldset>
	</form>
</field>

Please test this with different screen widths (e.g. with the mobile development tools of the browser of your choice).

Expected result

The fields should always have an appropriate width. The labels should be displayed correctly. On small screens, the table columns should stack and the table headers (either fieldset names for groupByFieldset="true" or field names otherwise) should be displayed in the left column.

3d18428 1 Oct 2018

Change responsive layout for repeatable-table.

Harmageddon - open - 1 Oct 2018