0

I'm trying to make a calculator in the tray using ElectronJS. The CSS code does not work in my application, but copy-and-pasting it into a JSFiddle, I see it works perfectly. When I look into the Dev Tools in my Electron App, it says that display: grid and its related properties are invalid. Does this have to do with Chromium's CSS grid support?

HTML Code

  <body>
    <div class="container">
      <div class="output-box"></div>
      <div class="buttons">
        <div class="button" id="7"><h3>7</h3></div>

        <div class="button" id="8">8</div>
        <div class="button" id="9">9</div>
        <div class="button" id="square">x^2</div>
        <div class="button" id="sqrt">sqrt</div>
        <div class="button" id="4">4</div>
        <div class="button" id="5">5</div>
        <div class="button" id="6">6</div>
        <div class="button" id="/">/</div>
        <div class="button" id="x">x</div>
        <div class="button" id="1">1</div>
        <div class="button" id="2">2</div>
        <div class="button" id="3">3</div>
        <div class="button" id="+">+</div>
        <div class="button" id="-">-</div>
        <div class="button" id="0">0</div>
        <div class="button" id=".">.</div>
        <div class="button" id="pi">pi</div>
        <div class="button" id="=">=</div>
      </div>
    </div>
  </body>
  <script src="renderer.js"></script>

CSS


.container {
  padding: 25px;
}

.output-box {
  width: 300px;
  height: 100px;
  border-radius: 5px;
  padding: 25px;
  border: 1px solid black;
}
.buttons {
  margin-top: 50px;
  height: 250px;
  width: 300px;
  padding: 25px;
  border-radius: 5px;
  border: 2px solid black;
  display: grid;
  grid-template-columns: repeat(5, 37.5px);
  grid-template-rows: repeat(4, 37.5px);
  gap: 12.5px 12.5px;
}

Electron Output: Electron Output

JSFiddle Output: JSFiddle Output

lionrocker221
  • 171
  • 3
  • 8
  • 1
    It looks like the CSS isn't getting run, can you include the code that runs the CSS? – Joshua Dec 21 '20 at 00:08
  • -ms-grid-column https://stackoverflow.com/questions/52164623/css-grid-displaying-incorrectly-in-google-chrome-browser grid-template-columns https://stackoverflow.com/questions/57830435/why-is-my-css-grid-not-working-in-chrome-works-in-all-other-browsers grid-template: https://stackoverflow.com/questions/62572551/css-grid-firefox-vs-chrome-difference-with-grid-template-columns Chrome 80 issue with a runnable snippet: https://stackoverflow.com/questions/60083540/why-does-chrome-80-cause-this-grid-template-rows-auto-problem – react_or_angluar Dec 21 '20 at 00:09
  • @Joshua, the CSS that applies the border and the border-radius is in the same CSS file, so it should be run. – lionrocker221 Dec 21 '20 at 00:51
  • Can you try setting `webPreferences: {nodeIntegration: true, contextIsolation: true}` on your BrowserWindow? Can you also post what options you're passing into BrowserWindow so I can try and reproduce it? – Joshua Dec 21 '20 at 00:58
  • @Joshua I'm using menubar from https://github.com/maxogden/menubar, where options can be passed into the BrowserWindow. `const mb = menubar({ icon: trayIconPath, browserWindow: { width: 350, height: 450, resizable: true, nodeIntegration: true, contextIsolation: true, },` is the most recent code that I tried, but it still doesn't work. – lionrocker221 Dec 21 '20 at 01:03
  • @jqueryHtmlCSS, would you mind elaborating further on how this would apply to my situation? I don't see it myself – lionrocker221 Dec 21 '20 at 01:15
  • If you post a runnable script somewhere it would be much easier. Preferably here on stackoverfow.com The image is a bit helpful, but nearly as helpful as a runnable snippet. If it was me, I would remove the image. – react_or_angluar Dec 21 '20 at 01:16
  • @jqueryHtmlCSS, i'm not sure how to make a runnable script here on stackoverflow, but here is CodePen i just made: https://codepen.io/lionrocker221/pen/GRjvWoL – lionrocker221 Dec 21 '20 at 01:19
  • 1
    the codepen works exactly how it's supposed to, but on my electron app it doesn't work – lionrocker221 Dec 21 '20 at 01:20

0 Answers0