Search code examples
csselectronelectron-packager

electron packager renders css differently with a weird white margin..how to debug and fix this?

My electron-packager renders the css in a very strange way. In the package app there is a weird white margin around the actual app and the content window has only 50% of the space it should have: enter image description here

In earlier version this used to work so I am not sure which change caused this. For comparison this is how the app looks like in dev mode: enter image description here

How can I fix and debug this? I tried to integrate electron-debug from https://github.com/sindresorhus/electron-debug to have chrome dev tools within the packaged app but it seems like I did something wrong with the integration of it?

    function createWindow () {
  /**
   * Initial window options
   */
  mainWindow = new BrowserWindow({
    height: 1080,
    useContentSize: true,
    width: 1920
  })

  mainWindow.loadURL(winURL)

  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

require('electron-debug')({showDevTools: true})

app.on('ready', createWindow)

PS: My techstack is based on this boilerplate https://github.com/SimulatedGREG/electron-vue I added http://element.eleme.io/#/en-US for grid system and ui controls. As requested the css:

app.vue

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<style>
  /* CSS */
  html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: "Helvetica Neue", Helvetica;

  }
    #app {
        height: 100%;
        margin: 0;
        padding: 0;
    }

</style>

And this is my MainPage.vue displayed inside the router view:

<template>

    <el-container id="wrapper">
        <el-header>Logo Bratum</el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
        <el-footer>Program Status, Backend Status</el-footer>
    </el-container>

</template>

<style>
    .el-container {
        height: 100%;
        margin: 0;
        padding: 0;

    }

    .el-header, .el-footer {
        background-color: #b3c0d1;
        color: #333;
        text-align: center;
        line-height: 60px;
        z-index: 4;
        padding: 0;
        margin: 0;
    }

    .el-header {
        top: 0px;
    }

    .el-footer {
        bottom: 0px;
    }

    .el-main {
        height: 100%;
        background-color: #e9eef3;
        padding-top: 0;
        margin: 0;
    }

    .hline {
        margin-top: 40px;
        margin-bottom: 40px;
    }

</style>
Solution

  • After many hours of puzzling I solved it. My #wrapper settings were written with the #wrapper css settings from the boiler plate's landing page.

    For some reason these are applied during build but not during dev.

    Adding "scoped" to the style tag solved it

    <style scoped>