Skip to content

Commit 61507fb

Browse files
committed
fix(examples): fix scaled layout section display
- Fix scaledLayout CSS to properly compensate for transform scale - Add margin to description text for better spacing
1 parent 3662ff4 commit 61507fb

File tree

2 files changed

+4
-4
lines changed

2 files changed

+4
-4
lines changed

examples/ExampleLayout.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ export default class ExampleLayout extends React.Component<{}, {width: number, h
171171
</div>
172172

173173
<h3>Scaled Absolute Layout</h3>
174-
<div>
174+
<div style={{marginBottom: '10px'}}>
175175
<small>
176176
If you are nesting Resizables in an element with <code>transform: scale(n)</code>, be sure to pass the same <code>n</code>&nbsp;
177177
as the <code>transformScale</code> property.

examples/example.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
align-items: center;
1212
}
1313
.scaledLayout {
14-
width: 125%;
15-
left: -12.5vw;
1614
transform: scale(0.75);
17-
margin-top: -7.5vh;
15+
transform-origin: top left;
16+
width: 133.33%; /* 1 / 0.75 = 1.333 to compensate for scale */
17+
height: 800px; /* taller to compensate for scale */
1818
}
1919

2020
.box {

0 commit comments

Comments
 (0)