CODEWITHSUNDEEP
javascripthtmlcsselectronframeless
AlphaBlade01
AlphaBlade01

Reputation: 21

How would I go about making a draggable frameless window in electron

I've been searching all over the internet on how to make a frameless window draggable in electron and I keep finding the same solution everywhere, but it doesn't work for me.

This is my HTML code:

<header id="titlebar">
    <div id="drag-region">
        <img src="images/check_icon.svg" alt="icon" id="icon">
        <p id="title">to do app</p>
    </div>
</header>

And this is my CSS code:

#drag-region{
    -webkit-user-select: none;
    -webkit-app-region: drag;
}

I don't get any errors in the terminal however when I hover over -webkit-user-select: none;, a message pops up saying Also define the standard property 'user-select' for compatibilitycss(vendorPrefix). I haven't messed with that since I have no clue what it means and it does its job.

I was just wondering if there is anything wrong with my html or css code and why the frameless window is not draggable. I'm also looking for any alternate ways if there are any.

Upvotes: 0

Views: 979

Answers (1)

Yavor
Yavor

Reputation: 73

I just Tried it out and it worked here are the steps to how I did it. I added the
id="drag-region"
to the main <html> tag then I added this to the css
#drag-region{ -webkit-user-select: none; -webkit-app-region: drag; }
After that it worked for me :)

Upvotes: 0

Related Questions