Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Datatable] Checkboxes of the datatable demo buggy and out of bounds

See original GitHub issue

Bug report

Steps to reproduce

Use Laravel (might be obsolete step)
Use provided package.json
Build with npm run dev
Render Table.vue

Actual behavior

The checkboxes of the datatable example are buggy and out of bounds The compile went fine.

Expected behavior

To be as in the original demo

Screenshots

Your Environment:

Laravel and Vue 2

Software	Version(s)
MDC Web	4.0.0
Browser	Chromium 78.0.4050.0
Operating System	Ubuntu 18.04

Additional contex

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@material/data-table": "^4.0.0",
        "axios": "^0.19",
        "cross-env": "^6.0.3",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^3.1.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10",
        "vue-router": "^3.0.6"
    }
}

webpack.mix.js

mix.webpackConfig({
    module : {
        rules : [{
            test: /\.scss$/,
            use : [{
                loader: 'sass-loader',
                options : {
                    includePaths: ['node_modules', 'node_modules/@material/*'].map((d) => path.join(__dirname, d))
                }
            }]
        }]
    }
}).js('resources/js/demo.js', 'public/js').sourceMaps(false, 'source-map');

table demo vue2 Table.vue

<template>
    <div class="mdc-data-table">
        <table class="mdc-data-table__table" aria-label="Dessert calories">
            <thead>
            <tr class="mdc-data-table__header-row">
                <th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
                    <div class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected">
                        <input type="checkbox" class="mdc-checkbox__native-control" aria-label="Checkbox for header row selection"/>
                        <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
                                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                        </div>
                    </div>
                </th>
                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Status</th>
                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Signal name</th>
                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Severity</th>
                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Stage</th>
                <th class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader" scope="col">Time</th>
                <th class="mdc-data-table__header-cell" role="columnheader" scope="col">Roles</th>
            </tr>
            </thead>
            <tbody class="mdc-data-table__content">
            <tr data-row-id="u0" class="mdc-data-table__row">
                <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                    <div class="mdc-checkbox mdc-data-table__row-checkbox">
                        <input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u0"/>
                        <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
                                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                        </div>
                    </div>
                </td>
                <td class="mdc-data-table__cell">Online</td>
                <td class="mdc-data-table__cell" id="u0">Arcus watch slowdown</td>
                <td class="mdc-data-table__cell">Medium</td>
                <td class="mdc-data-table__cell">Triaged</td>
                <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
                <td class="mdc-data-table__cell">Allison Brie</td>
            </tr>
            <tr data-row-id="u1" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
                <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                    <div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
                        <input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u1"/>
                        <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
                                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                        </div>
                    </div>
                </td>
                <td class="mdc-data-table__cell">Offline</td>
                <td class="mdc-data-table__cell" id="u1">monarch: prod shared ares-managed-features-provider-heavy</td>
                <td class="mdc-data-table__cell">Huge</td>
                <td class="mdc-data-table__cell">Triaged</td>
                <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
                <td class="mdc-data-table__cell">Brie Larson</td>
            </tr>
            <tr data-row-id="u2" class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true">
                <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                    <div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--selected">
                        <input type="checkbox" class="mdc-checkbox__native-control" checked aria-labelledby="u2"/>
                        <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
                                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                        </div>
                    </div>
                </td>
                <td class="mdc-data-table__cell">Online</td>
                <td class="mdc-data-table__cell" id="u2">monarch: prod shared ares-managed-features-provider-heavy</td>
                <td class="mdc-data-table__cell">Minor</td>
                <td class="mdc-data-table__cell">Not triaged</td>
                <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
                <td class="mdc-data-table__cell">Jeremy Lake</td>
            </tr>
            <tr data-row-id="u3" class="mdc-data-table__row">
                <td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
                    <div class="mdc-checkbox mdc-data-table__row-checkbox">
                        <input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="u3"/>
                        <div class="mdc-checkbox__background">
                            <svg class="mdc-checkbox__checkmark" viewbox="0 0 24 24">
                                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                            </svg>
                            <div class="mdc-checkbox__mixedmark"></div>
                        </div>
                    </div>
                </td>
                <td class="mdc-data-table__cell">Online</td>
                <td class="mdc-data-table__cell" id="u3">Arcus watch slowdown</td>
                <td class="mdc-data-table__cell">Negligible</td>
                <td class="mdc-data-table__cell">Triaged</td>
                <td class="mdc-data-table__cell mdc-data-table__cell--numeric">0:33</td>
                <td class="mdc-data-table__cell">Angelina Cheng</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import {MDCDataTable} from '@material/data-table';
    export default {
        name: "Table",
        mounted() {

            const dataTable = new MDCDataTable(document.querySelector('.mdc-data-table'));
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@material/checkbox/mdc-checkbox.scss";
    @import "~@material/data-table/mdc-data-table.scss";
</style>

Issue Analytics

State:
Created 4 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

asyncLizcommented, Jan 7, 2020

Try changing viewbox to viewBox with a capital “B” on your svg elements. That attribute is case sensitive.

0reactions

asyncLizcommented, Jan 7, 2020

Glad to hear it!

Top Results From Across the Web

Select style `os` and behaviour of checkbox - DataTables

Seems like the video is working as you suggested you want. You are selecting a range then clicking one row to unselect. Is...

DataTables Checkboxes cannot show properly [closed]

I have created jQuery DataTables Checkboxes, now my problem is I cannot show the multiple checkboxes to select in the data table. I...

Enhancing HTML tables using the jQuery DataTables plug-in

$('#example').dataTable({ "bFilter": true, "oSearch":{ "sSearch": ...

Lesson 9 - Filter Wizard not filtering data table as expected

It is the example that has the “Employees 300” excel file and I am trying to filter by Age < 30 and Pay...

ui.datatable, API Reference Webix Docs

An editable table that can easily display huge data sets. The component is full of various possibilities: filtering, sorting, pagination, editing, navigation, ...