Child row display control does not show up between breakpoints...

catchdigiorno

So, I have a table with 8 columns, at 1397px wide, the first column disappears as I would expect. The issue is that the child row display control toggle does not show up until 991px.

Also, another oddity is that at 991px, seven rows are displayed, but at 992px only five rows are displayed (with no child row display toggle). This doesn't concern me as much as the toggle not appearing until the view-width is less than 992px.

I've dug through the documentation, but I cannot seem to come up with a solution. Any help would be appreciated.

        this.tableOptions = {
            serverSide: true,
            ajax: (data, callback, settings) => {
                return this.loadTeamLeaderboard(data, callback, settings);
            },
            responsive: {
                details: {
                    type: 'column',
                    target: 'tr'
                }
            },
            columnDefs: [
                {
                    className: 'control',
                    orderable: false,
                    targets: 0
                }
            ],
            select: false,
            destroy: true,
            searching: false, // TODO: implement table searching
            order: [0, 'desc'],
            ordering: false,
            pageLength: 10,
            dom: 'tpr',
            columns: [
                { title: '', defaultContent: '', className: 'control', orderable: false, targets: 0 },
                { responsivePriority: priority.rank, title: 'Rank', class: 'td-name', render: (d, type, row, meta) => {  return row.rank ? row.rank : 'N/A'; } },
                { responsivePriority: priority.name, title: 'Name', class: 'td-name word-wrap', render: this.tableHelperService.renderTeamStacked },
                { responsivePriority: priority.leader, title: 'Leader', class: 'td-name', render: this.tableHelperService.renderTeamLeaderLink },
                { responsivePriority: priority.members, title: 'Members', class: 'td-name right', data: '', render: this.tableHelperService.renderUsersCount },
                { responsivePriority: priority.gamifiedMembers, title: 'Gamified Members', class: 'td-name right', data: '', render: this.tableHelperService.renderGamifiedUsersCount },
            ]
        };

        if (this.useNewPointCalculation) {
            this.tableOptions.columns.push({ responsivePriority: priority.pointsPerMember, title: 'Points Per Gamified Member', class:'right', data: '', render: this.tableHelperService.renderTeamPPMNew});
            this.tableOptions.columns.push({ responsivePriority: priority.bonusTeamPoints, title: 'Bonus Team Points', class:'right', data: '', render: this.tableHelperService.renderTeamPoints});
            this.tableOptions.columns.push({ responsivePriority: priority.totalPoints, title: 'Total Points', class:'right', data: '', render: (a, b, row, c) => this.tableHelperService.renderTotalPointsForTeam(null, null, row, null)});
        } else {
            this.tableOptions.columns.push({ responsivePriority: priority.pointsPerMember, title: 'Points Per Gamified Member', class:'right', data: '', render: this.tableHelperService.renderTeamPPM });
        }

allan

Can you link to a test page showing the issue so we can debug it please?

Thanks,
Allan

catchdigiorno

Hey, thanks for the reply. I actually realized the issue is in this 20k line massive CSS base I've inherited. It's a mess, but fortunately, I figured it out.