The issue that a contextual link is causing your page to break. Please note that this issue only occurs for users that have permissions to modify panels, so your end users (visitors) should not see this.
The solution could be to disable the contextual link on the panel. Or disable the contextual links module entirely (what would remove the gear icon everywhere).
To disable contextual links only on some pages you might want to look at this question for how to disable a specific link: Is it possible to remove the contextual link for deleting a node?
Or you could try the Hide Contextual Links module.
UPDATE:
The main cause of this issue is a firefox bug, where outlines are drawn around descendant elements: https://bugzilla.mozilla.org/show_bug.cgi?id=687311
You can see it asked here on stackoverflow: https://stackoverflow.com/questions/10662902/css-outline-different-behavior-behavior-on-webkit-gecko, where the recommended action is to replace the outline with a box-shadow (no dashes), or the alternative to append overflow: hidden
to the element. I tried with overflow: hidden
and that worked so I'd try that first to keep the dashed line.
In Drupal, in you theme's css add:
.contextual-links-region-active {
/* Override the old outline */
outline: none !important;
box-shadow: 0px 0px 0px 1px #FFF;
/* OR */
overflow: hidden;
}
But once again, this is a firefox bug that is likely to influence only administrators who have permissions to modify panels (I have no idea about the company you are building this for, but that cannot be many users). So ask yourself if it is worth putting effort into this.
UPDATE-2: by@codenext,
As @Neograph734 has provided the very nice research on this issue in above UPDATE(basically it is FIREFOX BUG). Please follow the following comments and question details to understand the issue. I am just providing the final solution as final solution is just the extension of this answer.
SOLUTION: The main issue is, the outline(left part) of the contextual-link-region goes off the page as shown in the second image above(a dashed line area), and along with that it takes the page-border/outline css off the page too. Hence we can put the overflow:hidden;
in the #page/#content-column selector(as in my case, I have put border: and outline: css in these selectors) instead of putting it in .contextual-links-region
. Hence, this way you can prevent the displacement of page-border and outline which caused the .contextua-links-region
(originally the firefox bug).
admin
. – Neograph734 Mar 30 '16 at 23:45