Placing Element at top of atom for package


I am building a package for a toolbar that will sit at the top of my atom window, however I noticed some wonky behavior. Currently I am using margin top to move everything else down. Is there a better way to move everything else down and put my row above everything else?


I would try inserting a div in the DOM at the top of the window. But perhaps @simurai has better suggestions?


The tool-bar package adds a bar above the editor, which should work fine:

But if it should be at the top also above the tree-view and take up the whole width… like this:

Then yes, it pushes down the status-bar. I guess you’re trying to the the full width, right?


Anyways, I made an issue about it, you could probably fix it in your package, but it should be done in core:

Feel free to keep an eye on it.


@simurai, that is exactly what I am hoping to do. Where exactly are you putting the tool-bar and what did you change on it to make it take the whole top of the screen?


I just dragged tool-bar’s <atom-panel-container> as first child of <atom-workspace> in the DevTools… but that’s just as example to make the screenshot and wouldn’t work because the status-bar is pushed down.

I’ll see if it’s possible to fix that first. Part of


@zackarychapple What’s your use case for having something take up full-width at the top.

I tried it out but when fixing the status-bar being pushed down, seeing them together felt weird. It’s like a “Z”. Keeping the tree-view full-height looks more evenly balanced.

We could have the status-bar go full-width too, but that’s also strange because it belongs to the active editor, see


@simurai ,

I am creating a menu bar that is global and not just within the context of the active editor.


@zackarychapple: I tend to agree with @simurai on the position, even if your toolbar is global to the application, it feels more “integrated” when docked above the text editors (specially on OSX where it’s a common practice to have a sidebar taking the full height of an app). And it should be an issue since it can span many panes, so it’ll still feel “global” from a user POV.


There is an issue for having the status-bar go full width. At first I thought the tree-view should be connected to an editor, but there are also arguments against it. In case the status-bar goes full-width, then a top menu bar would look even again.

For now, I reopened again.


Thank you for re-opening. While I agree that it is a specific use case to have the status-bar go full width it “should” be an option that is available.