search

skinnybrit51 / editable-grid

Bootstrap grid with CRUD functionality.
MIT License
30 stars 4 forks source link

Compatibility with Electron #98

Closed dsl101 closed 8 years ago

dsl101 commented 8 years ago

I'm very new to electron, so might just have something badly set up, but I can't get the basic 'hello world' of editable-grid to display properly. So far I've:

From what I can see, the app's content is correct, grid.css (not using LESS) is being included, and the empty <body> tag ends up with the correct table contents. But the display just doesn't look right - see screenshot.

Have I missed something obvious? Or is there something about editable-grid that means it wouldn't work with electron? I'm sure there's other info you might need - please let me know...

electron app source:

awsmanager.html:

<html style="background: #fff">
    <head>
        <link rel="stylesheet" href="./grid.css">
        <script>window.$ = window.jQuery = require('jquery');</script>
        <script src='./awsmanager.js'></script>
    </head>
    <body>
    </body>
</html>

awsmanager.js:

var Grid = require('editable-grid');

$(function() {
    console.log('Loaded');
    var grid = new Grid({
        el: $('body'),
        columns: [
            {
                id: 'a',
                title: 'a',
                width: '33.3%'
            },
            {
                id: 'b',
                title: 'b',
                width: '33.3%',
                alignment: 'right',
                titleAlignment: 'center'
            },
            {
                id: 'c',
                title: 'c',
                width: '33.3%',
                alignment: 'center',
                titleAlignment: 'right'
            }
        ],
        data: [
            {
                id: 'id-1',
                a: 'a',
                b: 'b',
                c: 'c'
            },
            {
                id: 'id-2',
                a: 'a',
                b: 'b',
                c: 'c'
            }
        ]
    });

    grid.render();
});

resulting app:

image 2

skinnybrit51 commented 8 years ago

Just missing bootstrap css. Needs to be before grid.css link `

`

dsl101 commented 8 years ago

Ah, OK. I was looking at this page and it didn't list bootstrap as a dependency - presumably it's only possible to put npm packages in that section...

Anyway, many thanks.