Why DIV shifts when focus() is invoked in onBeforeDeactivate event handler?

StackOverflow https://stackoverflow.com/questions/742975

Question

I met a wired problem for a web page in IE7/8. The page configured to be dir="rtl". And divRow is made very large width so as its containing div doesn't wrap.

Click the editor area, type some words, then click the "Hello world" text. The layout will turns to be messy, because the offset and width of div with divRow class changed.

I suppose this is a IE7/8 bug. Is there any way to workaround this?

Basically, divRow must to have its contained div not wrap.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <style>
    div 
    {
      border: 1px;
      border-color: black;
    }

    .divRow
    {
      /* this is to make its containing div not to wrap */
      min-width: 2000px; 
    }

    div.divEditor
    {
      width: 100%;
    }

    iframe
    {
      height: 100%;
      width: 100%;
    }
  </style>
  <script>
    function $(id)
    {
      return document.getElementById(id);
    }

    function focusToRight()
    {
      var elem = $("innerDiv1");

      function fcs()
      {
        elem.focus();
      }
      setTimeout(fcs, 1);

    }
  </script>
  </head>
  <body dir="rtl">
    <div>
    <div id='main' 
      style="overflow: hidden; position: relative; width=100%">
      <div class="divRow" id="firstRow">
        <div style='float:right' id='innerDiv1'>
          Hello world.
        </div>
        <div style='float:right' id='innerDiv2'>
          This is to make it is very very very very very very very very  
          very very very very very very very very long
        </div>
      </div>
      <div class="divEditor">
        <iframe id="editorIFrame" onbeforedeactivate="focusToRight();" 
          src="about:blank"></iframe>
      </div>
    </div>

    </div>
    <script>
      //document.getElementById('main').style.width='40px';
      //$("editorIFrame").document.designMode = "on";
      document.frames["editorIFrame"].document.designMode = "On";
    </script>
  </body>
</html>
Was it helpful?

Solution

Get rid of the min-width:2000px condition completely.

The way to stop a containing div from wrapping, or collapsing, is to insert an empty div with style="clear:right" just before the end of it. This new div is still inside the containing div, but it must clear, i.e go below, the floats, so it stretches the vertical height of the div.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top