Adding Bootstrap to html in electron causes my transparent background to turn white


#1

Evening Everyone,

I have been having some issues with adding bootstrap to my electron application. I have a single form that opens and it has a transparent background. Everything works find until I add the bootstrap css to the html. Once added my transparent background turns white and I cant seem to get it to go back.

Has any one see an issue like this? Below is my code.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>TEST</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.css"/>
        <link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.min.css" />
        <script src="./node_modules/jquery/dist/jquery.min.js"></script>
        <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        
        <style>
            @import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600');

            .skin-blue .wrapper {
                background-color: #E8E8E8;
            }
            .skin-blue .titlebar {
                background-color: #145374;
                color: white;
            }
            .skin-blue .titlebar a {
                color: white;
            }
            .skin-blue .titlebar a:hover {
                color: #5588A3;
            }
            .skin-blue .titlebar a:active {
                color: #00334E;
            }
            .skin-blue .titlebar a:visited {
                color: white;
            }
            .wrapper {
                height: 446px;
                width: 300px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                border-bottom-left-radius: 2px;
                border-bottom-right-radius: 2px;
                box-shadow: 2px 2px 5px #17202A;
            }
            .wrapper .titlebar {
                border-top-left-radius: 2px;
                border-top-right-radius: 2px;
                height: 32px;
                -webkit-user-select: none;
                -webkit-app-region: drag;
            }
            .wrapper .titlebar p {
                float: left;
                margin-left: 7px;
                margin-top: 3px;
                font-family: 'Titillium Web', sans-serif;
                font-size: 18px;
                -webkit-user-select: none;
                -webkit-app-region: drag;
            }
            .wrapper .titlebar a {
                padding-top: 8px;
                float: right;
                padding-right: 5px;
                text-decoration: none;
                -webkit-app-region: no-drag;
            }
            .wrapper .frmBody .description {
                margin-top: 10px;
                margin-left: 7px;
            }
            .wrapper .frmBody .computernames {
                resize: none;
                margin-left: 7px;
                width: 285px;
                height: 350px;
                border-radius: 2px;
                font-family: 'Titillium Web', sans-serif;
            }
            .wrapper .frmBody .importCmds {
                margin-top: 5px;
                margin-left: 7px;
            }
            .wrapper .frmBody .importCmds .btnimport {
                width: 285px;
                border-radius: 2px;
                font-family: 'Titillium Web', sans-serif;
            }
            .wrapper .frmBody .btnsubmit {
                margin-top: 5px;
                margin-left: 7px;
                width: 285px;
                border-radius: 2px;
                background-color: #145374;
                font-family: 'Titillium Web', sans-serif;
            }
        </style>
    </head>
    <body class="skin-blue">

        <div class="wrapper">
            
            <div class="titlebar">
                <p>Get-Computers</p>
                <a id="close-btn" class="fa fa-times" aria-hidden="true"></a>
            </div>
            
            <div class="frmBody">
                <div class="form-group">
                    <textarea class="form-control computernames" placeholder="Enter Computer Names"></textarea>
                    <button id="submit" class="btn btn-lg btn-primary btnsubmit" type="button" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>

        <script>

            const remote = require('electron').remote;

            document.getElementById("close-btn").addEventListener("click", function (e) {
                var window = remote.getCurrentWindow();
                window.close();
            }); 

            document.getElementById("submit").addEventListener("click", function (e) {

            }); 

        </script>


    </body>
</html>

Also below is the code I have for app.js

const {app, BrowserWindow} = require('electron');

let win;

function createWindow () {
  win = new BrowserWindow({transparent: true, frame: false});
  win.loadURL(`file://${__dirname}/app.html`);

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

app.on('ready', createWindow);

#3

Probably the bootstrap css rules adds background to some of the top-level elements like body or wrapper.
Did you try to inspect this background element and than add to your own css somethinf like:

[selector] {
background: none !important;
}

?


#4

You ROCK!!! I didnt look at body, I added your item to body and it fixed my issue. Thank you so much.