I am new to electron and I recently started trying electron and I am facing certain issue with materialized elements. The select element is properly rendered when I open the Html file in the browser, but when I run the HTML file from electron it's not rendering properly, electron rendering of the select element. The following files are main.js and index.html respectively. Please help me resolve this issue.
const path = require("path");
const os = require("os");
const {
app,
BrowserWindow,
} = require("electron");
require("electron-reload")(__dirname);
let window;
function createWindow() {
window = new BrowserWindow({
title: "App",
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
window.loadFile("index.html");
}
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("ready", createWindow);
app.disableHardwareAcceleration();<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<title>App</title>
</head>
<body>
<div class="container">
<div class="input-field col s12">
<select>
<option value="" disabled selected>What do you think?</option>
<option value="yes">Yes</option>
<option value="no">No</option>
<option value="dont">I Don't Know</option>
</select>
<label>A Demo of Material Select</label>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
<script>
(function($){
$(function(){
// Plugin initialization
$('select').not('.disabled').formSelect();
});
})(jQuery); // end of jQuery name space
</script>
</div>
</body>
</html>