CODEWITHSUNDEEP
javascriptcsselectronsvelte
little_monkey
little_monkey

Reputation: 439

How do I enable the ability to move a frameless window in Electron and Svelte?

I'm following this article to set up Electron and Svelte.

I wanted to make my window frameless so I enabled frame: false in index.js and it is successfully working and there is no title bar.

According to this StackOverflow answer, to enable moving, I need to use:

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

But this doesn't work and I can't drag anything. The entire Svelte code:

<main>
   <h1>Hello</h1>
</main>
<style>
    main {
        --webkit-user-select: none;
        --webkit-app-region: drag;
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Upvotes: 2

Views: 1858

Answers (1)

little_monkey
little_monkey

Reputation: 439

It turns out I needed to add:

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

to my Svelte app and then use -webkit-app-region: no-drag !important; for things that shouldn't be dragged like buttons.

Upvotes: 4

Related Questions