fix(): Removes relative styling on temporary div instance.

The "position: relative" style that was being applied to the temporary div used to get the first size was affecting components that were being wrapped and which were using "position: absolute" on one of their children. Fixes #20
ctrlplusb · Jul 25, 2016 · 3ad5a57 · 3ad5a57
1 parent 0cb3d8f
commit 3ad5a57
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 7 deletions.
diff --git a/example/src/MySizeAwareComponent.js b/example/src/MySizeAwareComponent.js
@@ -22,18 +22,20 @@ const spanStyle = {
   transform: `translateX(-50%) translateY(-50%)`
 };
 
-function MyComponent({ size: { width, height }, style }) {
+function MyComponent({ children, size: { width, height }, style }) {
   return (
     <div style={Object.assign({}, rootStyle, style)}>
       <span style={spanStyle}>
         {Math.round(width)}x{Math.round(height)}<br />
         <span style={{ fontWeight: `normal`, fontStyle: `italic` }}>(rounded)</span>
       </span>
+      {children}
     </div>
   );
 }
 
 MyComponent.propTypes = {
+  children: PropTypes.node,
   size: PropTypes.shape({
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,

diff --git a/example/src/index.js b/example/src/index.js
@@ -21,8 +21,11 @@ function App() {
 
         <div style={{ float: `left`, width: `40%` }}>
           <MySizeAwareComponent
-            style={{ height: `250px`, backgroundColor: `rgb(29, 165, 154)` }}
-          />
+            style={{ height: `250px`, backgroundColor: `rgb(29, 165, 154)`, position: `relative` }}
+          >
+            <MySizeAwareComponent
+              style={{ height: `50px`, backgroundColor: `rgb(88, 164, 29)`, position: `absolute`, bottom: 0, left: 0, width: `100%` }} />
+          </MySizeAwareComponent>
           <MySizeAwareComponent
             style={{ height: `250px`, backgroundColor: `rgb(252, 181, 193)` }}
           />

diff --git a/src/SizeMe.js b/src/SizeMe.js
@@ -37,7 +37,7 @@ function Placeholder({ className, style }) {
   // container take the full available space.
   if (!className && !style) {
     phProps.style = {
-      width: `100%`, height: `100%`, position: `relative`
+      width: `100%`, height: `100%`
     };
   } else {
     if (className) {

diff --git a/test/SizeMe.test.js b/test/SizeMe.test.js
@@ -4,8 +4,8 @@ import React from 'react';
 import { expect } from 'chai';
 import { describeWithDOM } from './jsdom';
 import sinon from 'sinon';
-import { mount, shallow } from 'enzyme';
-import { renderToString } from 'react-dom/server'
+import { mount } from 'enzyme';
+import { renderToString } from 'react-dom/server';
 
 const html = `
 <!doctype html>
@@ -28,7 +28,7 @@ describeWithDOM(`Given the SizeMe library`, () => {
   let SizeMe;
   let SizeMeRewireAPI;
   let resizeDetectorMock;
-  const placeholderHtml = `<div style="width: 100%; height: 100%; position: relative;"></div>`;
+  const placeholderHtml = `<div style="width: 100%; height: 100%;"></div>`;
 
   beforeEach(() => {
     SizeMe = require(`../src/index.js`).default;