CSS moves parent of absolute children when one gets focus

Question

I have a document set out like so.

When some websocket activity happens, the input field (id=bar, which is hidden by overflow:hidden) is eventually focused by my code and it shifts my entire parent element over so none of the other controls are visible. Run the fiddle at the bottom for an example.

HTML:

<div class="outer">
  <div class="parent">
    <div class="child" style="left: 10px; top: 10px; background:red;">Test1</div>
    <div class="child" style="left: 10px; top: 52px">Test2<div>
    <input class="child" id="bar" style="left: 30px; top: 10px">Test3</div>
  </div>
</div>

CSS:

.outer {
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.parent {
    position: relative;
}

.child {
    position: absolute;
}

JS:

setTimeout(function() {
    document.getElementById('bar').focus();
}, 2000);

Note: I set the delay on the timeout low. You may have to refresh the page to see it happen.

Fiddle: http://jsfiddle.net/qa28q48o/2/

How can I prevent this from happening preferably at the CSS level, without using any javascript hacks on the element to reset its scroll.

Answer 1

The container scrolls to the focused element eventhough it is overflow: hidden. So you result with no scrollbars seeing just a small junk of your content...

Possible solutions: 1. overflow: visible or overflow: scroll on outer 2. bigger dimensions for outer

Just give it a little more freedom, poor outer...

Answer 2

I stumbled upon this issue aswell, took a while before i figured out what was going on :)

Anyhow, i solved it by doing a .blur() on the link that triggered the dialog, just before the dialog was opened.

if (link.hasClass('confirm')) {
    link.blur(); 
    $('#dialog-confirm').dialog({
        ...