FR: Remove redundant group-header div and children on stacked grid items when v-if="canDeleteRows" is true.

[benfurfie]

Is your feature request related to a problem? Please describe. First all all, thanks for fixing #2207. This feature is related to that bug fix.

Describe the solution you'd like I was wondering if it would be possible to move the v-if="canDeleteRows" on the stacked instance (line 45 of GridFieldtype.vue) to line 42. This would hide the group header/drag handle which is redundant/superfluous when a stacked grid is set to min/max_rows: 1. You can't drag it anywhere anyway, and by removing the unnecessary element, it tidies up the control panel.

Describe alternatives you've considered I could continue to move it myself everytime the file is updated :p. Otherwise, I've considered creating a group addon that would do the same but it seems a bit pointless when this small change would achieve the same result.

Additional context

<div v-if="hasData && stacked" class="grid-stacked">
    <div class="list-group" v-for="(rowIndex, row) in data">
        <div class="list-group-item group-header pl-3 drag-handle" v-if="canDeleteRows">
            <div class="flexy">
                <label class="fill">{{ rowIndex + 1 }}</label>
                        <template>
                                <i class="icon icon-cross" v-on:click="deleteRow(rowIndex)"></i>
                        </template>
        </div>
    </div>
...

Result

Would you be willing to sponsor this feature? More than happy to make the code change and submit it as a PR if that helps :)

[jasonvarga]

Were you able to solve this with CSS as suggested in Discord?

[benfurfie]

Hey Jason. I did try, but the issue is it cascades down to any children that should be movable. When I edited the compiled bootstrap.js file, this didn't happen. Sorry! Really wish it had been that simple an approach.