Stupid question about html in Electron | electronjs.org | Page 1

neon zenith Dec 25, 2023, 7:18 PM

#

Heyh guys, I'm making a rlly simple app in Electron, and I just created a button inside of a container that will open another page. For some reason, if the button is outside of the container it will work, otherwise it won't. That's not rlly what I would expect from basic html, so I tried to run the page on google and it indeed worked as I would expect. Is there something basic that I'm missing, or it's involved Electron? This is the HTML:

    <div class="container">
      <button id="settingsBtn"></button>
      <p class="temp" id="cpu_temp">temp</p>
      <p class="component">CPU</p>
    </div>

as you can see it's rlly basic and I doubt any css can create issues, specially since on Electron I can't even highlight the element when hovering over it, while I can just as normal when doing it on a web browser

sonic path Dec 25, 2023, 7:21 PM

#

where is the JS code that comes with this?

neon zenith Dec 25, 2023, 7:22 PM

#

settingsBtn.addEventListener('click', () => {
  console.log('clicked');
  window.open('./settings/index.html', '_blank', 'top=500,left=200,frame=false,nodeIntegration=no');
});

this is the js code, but the problem is even before that. With or without js, I can't even inspect the button as I would expect (and as I've tested) on a web browser

sonic path Dec 25, 2023, 7:23 PM

#

What do you mean you can't inspect?

#

it's a weird way to create a window

neon zenith Dec 25, 2023, 7:24 PM

#

by clicking control + shift + c in the console, your mouse will highlight whichever element it is hover over. That indeed works on a web browser, but it doesn't highlight anything on the electron page

sonic path Dec 25, 2023, 7:24 PM

#

it should

neon zenith Dec 25, 2023, 7:24 PM

#

sonic path it's a weird way to create a window

yeah I just copy pasted it from the docs cause I'm still styling the button first, and then I will think about that part

sonic path Dec 25, 2023, 7:25 PM

#

but I suppose you mean ctrl+shift+i

neon zenith Dec 25, 2023, 7:25 PM

#

sonic path it should

yeah that's pretty strange

neon zenith Dec 25, 2023, 7:25 PM

#

sonic path but I suppose you mean ctrl+shift+i

with control+shift+i you open the console on electron, and then with control+shift+c you highlight the elements that your cursor is hovering over

sonic path Dec 25, 2023, 7:26 PM

#

Oh okay, I never do like this

#

there is a button on top left corner to do that

neon zenith Dec 25, 2023, 7:26 PM

#

yeah

#

but I'm used to do it like this cause on browser it automatically opens the console when you do that, so one less step

sonic path Dec 25, 2023, 7:27 PM

#

how do you get settingsBtn?

neon zenith Dec 25, 2023, 7:27 PM

#

const settingsBtn = document.querySelector('#settingsBtn');

#

it's also strange that if I move it out of the container it will work

sonic path Dec 25, 2023, 7:28 PM

#

I you looked for errors in the console?

neon zenith Dec 25, 2023, 7:28 PM

#

yeah and there's nothing

#

it's like if something was over it, but... there's nothing

sonic path Dec 25, 2023, 7:29 PM

#

I'm not sure we can't help you with the info you provided

neon zenith Dec 25, 2023, 7:29 PM

#

what else could I show you? it's a rlly rlly basic page actually, there's not much more than that

#

but if you need something specific I can show you whatever you need

sonic path Dec 25, 2023, 7:30 PM

#

can you click on the button or you can't click on it at all?

neon zenith Dec 25, 2023, 7:30 PM

#

I can't click on it at all

sonic path Dec 25, 2023, 7:30 PM

#

so must be something in the css

#

remove all CSS and see if it changes something

neon zenith Dec 25, 2023, 7:31 PM

#

#settingsBtn {
    position: absolute;
    width: 20px;
    height: 20px;

    background-image: url('./img/gearIcon.png');
    background-size: cover;

    bottom: 1px;

    background-color: transparent;

    border: none;
    margin: 2px;
    padding: 0;

    /* z-index: 1; */
}

this is the css. I also tried with z index but nothing

sonic path Dec 25, 2023, 7:31 PM

#

remove it

neon zenith Dec 25, 2023, 7:31 PM

#

ah uhh yeah it's not the best css you've ever seen in your life but... yeah, still styling it xd (also I suck at styling things)

#

done, and nothing changed :(

sonic path Dec 25, 2023, 7:32 PM

#

🤷‍♀️

#

maybe something else in your HTML

#

and you should try to remove all the CSS, not just the button's

neon zenith Dec 25, 2023, 7:33 PM

#

but there's basically nothing else than other 4 almost copy pasted containers... want me to show that to you?

#

ok let me try

sonic path Dec 25, 2023, 7:34 PM

#

for this kind of bug, usually what work best is removing everything till it works

#

and then puting stuff back again one by one

neon zenith Dec 25, 2023, 7:34 PM

#

mhh even by removing the container css, nothing changes

sonic path Dec 25, 2023, 7:34 PM

#

till it no longer works

neon zenith Dec 25, 2023, 7:35 PM

#

well I guess I can try but, rlly, there's basically nothing else, it's a rlly rlly basic and easy project, so I don't think there's anything else that can interfere with that

#

so I was wondering if it's something about electron

sonic path Dec 25, 2023, 7:35 PM

#

No

neon zenith Dec 25, 2023, 7:36 PM

#

mhh that's strange... but the point it that I can hover over it in the webpage, so it must be something with the app

sonic path Dec 25, 2023, 7:36 PM

#

have you tried to restart the app?

neon zenith Dec 25, 2023, 7:36 PM

#

yeah I did, but well let me try again

#

uhh yeah, no difference

sonic path Dec 25, 2023, 7:37 PM

#

Okay, try something simple, remove everything, just keep a single button in your HTML, nothing else. Remove JS and CSS code

#

except for main process JS code

neon zenith Dec 25, 2023, 7:38 PM

#

I commented out everything in the html but that container, and nothing

sonic path Dec 25, 2023, 7:38 PM

#

just keep the button

neon zenith Dec 25, 2023, 7:38 PM

#

the button alone works without the container

#

even if I keep everything as it is and move the button outside of it's container it will work

sonic path Dec 25, 2023, 7:39 PM

#

I yes sorry I forgot that x)

neon zenith Dec 25, 2023, 7:39 PM

#

and I can hover over it

#

I'm so confused :(

sonic path Dec 25, 2023, 7:40 PM

#

err, what if you change the classname of the container?

#

I can't see the rest of your code so I can only guess

neon zenith Dec 25, 2023, 7:40 PM

#

change the name of the container? I can try

neon zenith Dec 25, 2023, 7:40 PM

#

sonic path I can't see the rest of your code so I can only guess

I can show you the rest, do you want the whole html?

#

it's not that long anyway xd

sonic path Dec 25, 2023, 7:41 PM

#

why not, if it's not too long

#

and CSS too

neon zenith Dec 25, 2023, 7:41 PM

#

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>System Monitor</title>
    <script defer src="script.js"></script>
  </head>
  <body>
    <div class="container">
    <button id="settingsBtn"></button>
      <p class="temp" id="cpu_temp">temp</p>
      <p class="component">CPU</p>
    </div>

    <div class="container">
      <p class="temp" id="cpu_usage">usage</p>
      <p class="component">CPU usage</p>
    </div>

    <div class="container">
      <p class="temp" id="gpu_temp">temp</p>
      <p class="component">GPU</p>
    </div>

    <div class="container">
      <p class="temp" id="gpu_usage">usage</p>
      <p class="component">GPU usage</p>
    </div>

    <div class="container">
      <p class="temp" id="gpu_fan">fan</p>
      <p class="component">GPU fan</p>
    </div>

    <!-- You can also require other files to run in this process -->
    <script src="../renderer.js"></script>
  </body>
</html>

#

see? rlly basic

#

/* styles.css */

* {
    /* background-color: #1b1b1b; */
    color: black;
    font-family: arial, serif;
    user-select: none;
}

::-webkit-scrollbar {
    display: none;
}

#settingsBtn {
    position: absolute;
    width: 20px;
    height: 20px;

    background-image: url('./img/gearIcon.png');
    background-size: cover;

    bottom: 1px;

    background-color: transparent;

    border: none;
    margin: 2px;
    padding: 0;

    z-index: 1;
}

#gearIcon {
    /* position: absolute; */
    width: 20px;
    /* bottom: 1px; */
    /* margin: 2px; */
}

/**--------------------------------------------
 *                     SPECS
 *---------------------------------------------**/  

.container {
    -webkit-app-region: drag;
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 3px solid black;
    border-radius: 6px;
}

.temp {
    position: absolute;
    font-size: 35px;
    right: 0;
    left: 0;
    margin: 10px;
    text-align: center;
}

.component {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 3px;
    text-align: center;
    font-size: 12px;
}

and here is the css... rlly basic (and ugly) too xd but that's as far as my creativity goes xd

sonic path Dec 25, 2023, 7:43 PM

#

and you say the bug still happen when all of the css is commented?

neon zenith Dec 25, 2023, 7:43 PM

#

yeah

#

I'll try once again

#

well yeah if I comment out the container it moves away and it works

#

which correlates to moving the button out of the contianer in the html

#

so that container must be the issue

sonic path Dec 25, 2023, 7:46 PM

#

probably because of:

-webkit-app-region: drag;

neon zenith Dec 25, 2023, 7:46 PM

#

I commented that out too, but nothing

#

wait, maybe let me try commenting that out and restarting

#

ohhh...

#

if I comment it out AND restart, it works

sonic path Dec 25, 2023, 7:47 PM

#

you can't click on stuff if it's inside a drag region

#

you have to tell these elements not to be draggable

#

.container #settingsBtn {
  -webkit-app-region: no-drag;
}

neon zenith Dec 25, 2023, 7:48 PM

#

well it makes sense... I've been tricked by the reload, cause I thought that could be the cause but I had to restart the app xd

#

doesn't work :(

sonic path Dec 25, 2023, 7:50 PM

#

it should work

neon zenith Dec 25, 2023, 7:50 PM

#

without " righit?

sonic path Dec 25, 2023, 7:50 PM

#

what?

neon zenith Dec 25, 2023, 7:50 PM

#

.container #settingsBtn {
    -webkit-app-region: no-drag;
}

#

like this right?

sonic path Dec 25, 2023, 7:51 PM

#

I basing this on my own code so yes

neon zenith Dec 25, 2023, 7:51 PM

#

maybe I can put it with settingsBtn and give it a z-index?

#

oh yeah :D

sonic path Dec 25, 2023, 7:52 PM

#

a z-index should not be necessary

neon zenith Dec 25, 2023, 7:52 PM

#

oh

#

then let me try again

sonic path Dec 25, 2023, 7:52 PM

#

ah wait, you use positioning so maybe you need it

neon zenith Dec 25, 2023, 7:53 PM

#

mhh without z-index it doesn't work, but with it, it works, so I guess that's a win :D

sonic path Dec 25, 2023, 7:53 PM

#

why use position absolute btw?

#

you should rarely need to use it

#

well, it depends on the design of course, but make sure you actually need it

neon zenith Dec 25, 2023, 7:54 PM

#

uhh I used it so that it can stay in the container without moveing other objects. You think I shouldn't use it? Maybe let me show you how that looks

#

as I've said, that's as far as my creativity goes so... x

#

but if you think it's better to use the position relative, let me change it real quick

sonic path Dec 25, 2023, 7:56 PM

#

hmm, I guess it depends on what design you want in the end

neon zenith Dec 25, 2023, 7:57 PM

#

ummhh... I don't think I can make it look any "better" than this, I'm bad at styling ;-;

sonic path Dec 25, 2023, 7:57 PM

#

^^

#

then keep it like this if it's what you want

neon zenith Dec 25, 2023, 7:57 PM

#

uhh yeah or at least, I don't have any better idea xd but so in this case do you think I should use absolute or relative?

#

uhh yeah cause it moves all the other elements (the temperature for example) if I use relative

#

cause it can't "stay inside" other elements

sonic path Dec 25, 2023, 7:59 PM

#

there are different ways to achieve the same look

#

but at least now your button works

neon zenith Dec 25, 2023, 8:00 PM

#

yeah ahaha, it works now ^^ and I need more styling... I need to create a whole new page now ahaha

#

but thank you a lot for helping ^^ I probably wouldn't have found the issue ahah

sonic path Dec 25, 2023, 8:02 PM

#

and now you understand why a thread is necessary xD

#Stupid question about html in Electron