Moving the APEX Developer Toolbar

When you are developing an APEX application there may be certain situations (primarily depending on your page template) that require you to move the APEX toolbar from the bottom of the screen. The screen shot below shows such a case where there is content all the way to the end of the screen and the toolbar is preventing you from accessing/clicking on something at the bottom. If you try to click the last Edit button nothing happens since the toolbar is overlaying it. Note: I modified the page template to highlight this issue.

This doesn't occur very often but when it does there's a simple solution to move the toolbar from the bottom to the top of the screen. Run the following JavaScript code in your browser's console window and the toolbar will move to the top of the page.

//Note on older versions of APEX you'll need to check the toolbar's ID
$('#apex-dev-toolbar').css({
  top: 0,
  height: '22px'
});

Once at the top it will look like the image below. Note that the logout link (top right corner) is no longer clickable.

If this happens a lot in development you could create a special button for the JavaScript code and add it as a dynamic action.