# Positioning Electron Tray apps on Windows taskbar

One challenge when building an Electron Tray app is window positioning – assuming you want the app to act as a tooltip (eg: Google Drive app).

If you’re here just for the resulting code, scroll down and grab it, otherwise I highly recommend using a pen and paper to draw the screen, taskbar and tray position – as it makes it easier to figure how everything comes together. We’re interested in the workspace (gray area), whole screen (blue area), and the two dots: top (workspace X&Y coordinates) and the bottom are the X&Y of the tray icon.

Our goal is to figure out the coordinates where the app top-left corner should be. On macOS you can position your tray app by following these steps :

1. Get your app and tray bounds – this will give you their X & Y points as well as their width and height.
2. You can determine the coordinates by using the following method:
``````x = trayX - (trayWidth / 2) - (appWidth / 2);
y = trayY + trayHeight;
``````

Your final code might look something like this:

``````// Get app window and tray bounds
let winBounds = win.getBounds();
let trayBounds = tray.getBounds();

// Calculate new app window coordinates
let x = Math.round(trayBounds.x + (trayBounds.width / 2) - (winBounds.width / 2));
let y = trayBounds.y + trayBounds.height;

// Set new position
win.setPosition(x, y);
``````

## Electron Tray app positioning on Windows taskbar:

Here is where things get a bit more complicated because as you may know, Windows OS allows their users to switch their taskbar position – so the above formula won’t work when the taskbar is positioned on the left, right, or bottom part of the screen.

Here’s what we’ll need to pull this off:

• As before, the app and tray bounds
• Workspace and Display bounds

We need the workspace and display bounds for two reasons:

1. figure out the taskbar position so we can pick the correct formula
2. when the taskbar is on either right or left, we can no longer trust the tray bounds as the icons might be positioned on two columns, making our app floating over the taskbar Here’s what I was able to come off with:

``````
function getAppWindowCoordinates() {
let winBounds = win.getBounds();

// There may be more than one screen, so we need to figure out on which screen our tray icon lives.
let trayScreen = screen.getDisplayNearestPoint({
x: trayBounds.x,
y: trayBounds.y
});

// Now that we know the display, we can grab its bounds and its workspace area.
let workArea = trayScreen.workArea;
let screenBounds = trayScreen.bounds

if (workArea.x > 0) { // The workspace starts more on the right
return {
x: workArea.x,
y: workArea.height - winBounds.height
};
}

if (workArea.y > 0) {
return {
x: Math.round(trayBounds.x + (trayBounds.width / 2) - (appBounds.width / 2)),
y: y
};
}

// Here both workArea.y and workArea.x are 0 so we can no longer leverage them. We can use the workarea and display width though.
if (workArea.width < screenBounds.width) { // The taskbar is either on the left or right, but since the LEFT case was handled above, we can be sure we're dealing with a right taskbar
return {
x: workArea.width - appBounds.width,
y: screenBounds.height - appBounds.height
};
}