goog.ui.scrollfloater: element with negative margin breaks it (with solution)

Try the example below. goog.ui.scrollfloater doesn't work well if the floated 
element has a negative margin.

The solution is simple and also works for elements with negative right margin, 
without affecting elements with positive margins:

1. Add 'marginLeft' to goog.ui.ScrollFloater.STORED_STYLE_PROPS_

goog.ui.ScrollFloater.STORED_STYLE_PROPS_ = [
  'position', 'top', 'left', 'width', 'cssFloat', 'marginLeft'];

2. Reset margin in goog.ui.ScrollFloater.prototype.startFloating_ (after left 
offset is already calculated). I simply added 'marginLeft' to the properties 
set at some point, there:

goog.style.setStyle(elem, {
    'left': originalLeft_ + 'px',
    'width': originalWidth_ + 'px',
    'cssFloat': 'none',
    'marginLeft': 0
  });

Here's the example:

<!DOCTYPE html>
<html>
  <head>
    <style>
    #content {
      letter-spacing: -0.31em;
      padding-left: 300px;
    }
    #sidebar {
      margin-left: -300px;
      width: 300px;
      background: #FFCC00;
    }
    #main {
      width: 100%;
      background: #FF9900;
    }
    .column {
      display: inline-block;
      letter-spacing: normal;
      vertical-align: top;
    }
    </style>
  </head>
  <body>
    <div id="content">
      <div class="column" id="sidebar">
        I float.
      </div>
      <div class="column" id="main">
        I don't float.
      </div>
    </div>
    <script src="/static/js/closure-library/closure/goog/base.js"></script>
    <script>
      goog.require('goog.string');
      goog.require('goog.ui.ScrollFloater');
    </script>
    <script>
      var scrollfloater = new goog.ui.ScrollFloater();
      scrollfloater.decorate(goog.dom.getElement('sidebar'));

      goog.dom.getElement('main').innerHTML = goog.string.repeat('nom nom nom nom ', 1000);
    </script>
  </body>
</html>

Original issue reported on code.google.com by rodrigo.moraes on 21 May 2012 at 9:17

In fact, this also fixes scrollfloater for elements with positive left margins 
(because the calculated offset left position *already* takes into account the 
left margin). The fix above also fixes this.

See it broken:

<!DOCTYPE html>
<html>
  <head>
    <style>
    #floated {
      margin-left: 300px;
      background: #FFCC00;
    }
    </style>
  </head>
  <body>
      <div id="floated">
        I float.
      </div>
      <div id="main">
        I don't float.
      </div>
    <script src="/static/js/closure-library/closure/goog/base.js"></script>
    <script>
      goog.require('goog.string');
      goog.require('goog.ui.ScrollFloater');
    </script>
    <script>
      var scrollfloater = new goog.ui.ScrollFloater();
      scrollfloater.decorate(goog.dom.getElement('floated'));

      goog.dom.getElement('main').innerHTML = goog.string.repeat('nom nom nom ', 1000);
    </script>
  </body>
</html>

Original comment by rodrigo.moraes on 22 May 2012 at 10:47

yuntaozhu / closure-library

goog.ui.scrollfloater: element with negative margin breaks it (with solution) #472