What steps do I need to take to create a draggable window without a frame in electron?

I have been scouring the depths of the internet for a solution on how to make a frameless window draggable in electron, but no matter where I look, I keep stumbling upon the same ineffective fix.

Here is the HTML code I have been using:

<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>

Additionally, this is my CSS code snippet:

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

While there are no errors present in the terminal, an unexpected message appears when hovering over the -webkit-user-select: none; property stating

Also define the standard property 'user-select' for compatibilitycss(vendorPrefix)
. Despite this, I haven't made any changes as I am unsure of its significance and it seems to be functioning properly.

I am uncertain why the frameless window remains undraggable despite implementing the mentioned html and css codes. Therefore, I am seeking alternative solutions or debugging methods if possible.

Answer №1

I recently tested this method and it was successful. Here are the steps I took to achieve it. First, I included the
id="drag-region"
within the main <html> tag, then I applied the following CSS code:

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

After implementing these changes, the feature worked as expected :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the href attribute be assigned an arbitrary string that does not start with http?

Is it feasible to assign an arbitrary string as the HTML href attribute for an <a> tag? The intention is to present this text to website visitors so they can copy it easily through the "copy link location" context menu. The catch here is that this ...

Is it possible to retrieve the original array after removing filters in Angular?

Within my component, I have an array that I am filtering based on a search string. The filtering works as expected when the user inputs characters into the search field. However, I am encountering an issue when attempting to display all records again after ...

Steps to retrieve a base64 image using Cordova's FileTransfer feature

Recently, I encountered an issue with downloading base-64 images using the Cordova file transfer protocol. When I tried to provide a remote server path like "", the download worked perfectly. However, when I attempted to use a base-64 image path for the fi ...

Incorporate Bootstrap and SCSS by utilizing class names within the SCSS code rather than directly in the HTML files

When working with Bootstrap 4, I have discovered the text-truncate class that can be used in an element. For example: <span class="text-truncate">Any very long text</span> Now, my goal is to apply this text-truncate class to multiple objects ...

The issue of multiple AJAX calls not functioning asynchronously leading to slow Time To First Byte (TTF

Implementing multiple Ajax calls to populate drop down lists seems to be causing performance issues: window.addEventListener('load', function () { GetDropDownData('http://mysite/controller/action/parameters1', '#ddl1') }); .. ...

Exploring the method to search across various fields in Vue.js 2

In my Vue.js 2 application, I am attempting to search or filter through three fields: firstname, lastname, and email. Unlike Vue 1, Vue 2 does not include a built-in filter method. As a result, I have created a custom method that can only filter through on ...

A guide to retrieving the contents of an input field based on its assigned value and name attributes through Javascript

Can anyone help me with selecting an input element in my HTML code? Here is the input I want to select: <input id="tb-radio-gym_custom_radio-10ce67e3" type="radio" value="OUI" name="form_fields[gym_custom_radio]" data-price-inc="0" checked="checked"> ...

Utilizing JQuery for real-time total updates

When a new div is created by clicking a button, I want to dynamically maintain an order system where the first div is labeled as 1 of 1, then as more divs are added it should change to 1 of 2, and so on. If a div is deleted, the numbering should reset back ...

JavaScript Promise Triggering a Function Automatically

As a newcomer to Javascript promises, I am encountering an issue that has proven elusive in my research through Google and Stack Exchange. It seems that when referencing a function in a .then chain off a promise, I sometimes must enclose that function with ...

CORS problem in Chrome when using AngularJS and Symfony 3

I've been dealing with a bug on my backend and frontend for the past week. I created a REST API (php/symfony) to manage books and authors. Initially, I had trouble with cross-origin requests on DELETE, which has been resolved. However, now I am facin ...

The validation is unreliable in Django's forms.py

def clean_name(self): valname = self.cleaned_data['name'] if valname[0] == 'S': raise forms.ValidationError('name cannot contain the letter S') return valname # return the value if no error Validation is ...

Creating margin on a canvas with jsPDF is a simple task that can be accomplished

Hi there, I'm currently working on generating a PDF from HTML using jsPDF, but I've run into an issue with setting page margins. I would really appreciate any assistance on how to add margins to my pages using the canvas object. Below is the sou ...

Guide to displaying names in PHP/HTML organized by group or rank

I am in the process of setting up a NASCAR league for my family members and I am currently developing a roster page where they can easily add or remove drivers. How can I display the drivers according to their rank as stored in the database? (A/B/C/D/E gro ...

Unveil Secret Divs with a Click

I am in search of a way to display a hidden div when I click on a specific div, similar to the expanding images feature in Google's image search results. I have made progress with my limited knowledge of javascript, as shown in this CodePen: http://co ...

The tabPanel contents are not being displayed

As a newcomer to the sencha touch framework, I've encountered a problem that I'm struggling to solve on my own. The issue arises when I try to create a TabPanel within a Panel - the content of the TabPanel does not display, only the toolbar with ...

Having trouble getting Vue to properly focus on an input field

I am attempting to use this.$refs.cInput.focus() (cInput being a ref) but it seems to not be functioning as expected. I expect that when I press the 'g' key, the input field should appear and the cursor should immediately focus on it, allowing me ...

What is the most efficient method for iterating through APIs?

There are too many loops in this API, causing it to run slowly. We need to optimize the code to handle different time frames efficiently, such as day, month, and week. Running the same code for different intervals is slowing down the process. // Optimize ...

Using the factory pattern in a Node.js (Express) application

As I delved into the realm of design patterns, I found myself drawn to the factory pattern. However, as I perused through code written by others, I noticed that this particular pattern wasn't as prevalent, especially in newer stacks. Take for example ...

Discovering the potential of HTML5 Canvas matrix transformations

Throughout various Html5 resources, authors frequently discuss: transform(1,0,0,1,0,0) being equivalent to transform(0,1,1,0,0,0). I find this confusing. From my perspective, that implies newX = oldX/newY = oldY is the same as newX = oldY/newY = oldX. ...

Show the button only when the text is updated

Is there a way to display a button only when the quantity of items in the cart changes, similar to the eBay shopping cart feature? I was able to implement it but it's not functioning as expected. Here is the link to what I have so far. Does anyone kno ...