Fix empty column headers in Multiple Forms mobile view #2237

[zahardev]

This implements #2237.

💾 Build file (420bd45).

[zahardev]

In mobile view, column headers are displayed using the data-label attribute. Here is the default template:

<td id="{{ field_id }}" class="{{ class }}" data-label="{{label_value:data-label}}">{{ value }}</td>

In this particular case we output just <td></td>, with no data-label attribute, and return early. This works fine on the desktop view, but breaks the layout on mobile because it doesn’t have a data-label. I thought about adding the data-label attribute here first, but since labels and entire <td> HTML can be changed later using filters in gravityview_field_output(), it seems better to not return early, and handle this case the usual way for consistency. Please let me know if you'd like to add data-label attribute to instead.

[mrcasual]

@rafaehlers, thoughts?

[rafaehlers]

Sorry! I saw this comment before, but there wasn't any question.

Please let me know if you'd like to add data-label attribute to instead.

With my simple understanding of the issue, I think that would solve the problem because the CSS to make the table responsive needs that, so yes.

[zahardev]

@mrcasual @rafaehlers

Sorry, probably I didn't communicate clearly here. So current change already fixes the issue and works great for me.
Before the fix, empty td looked like this:

<td></td>

After the fix, it looks like this:

<td id="gv-field-18-3" class="gv-field-18-3" data-label="City"></td>

I left this comment just to consider another approach, when we still return early, but add data-label to the early returned <td>. Something like this:

Before:

if ( ! $single_entry = $entry->from_field( $field ) ) {
				echo '<td></td>';
				return;

After:

if ( ! $single_entry = $entry->from_field( $field ) ) {
				printf(  '<td data-label="%s"></td>', $field_label );
				return;

In this case, empty td would look like this:

<td data-label="City"></td>

Both approaches solve the issue, but second one can lead to unexpected bugs in case people use field filters. So I would vote for the current approach ( avoid using early return ).