diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2013-05-16 06:26:03 -0400 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2013-05-16 06:26:03 -0400 |
| commit | 1d3b8ff78eaa3d64a839ba34af34d1e8b24f82af (patch) | |
| tree | 71687ad92aea81bf5a1f354816b831fa06b9ca5c /demos/position | |
| parent | ce73a2688de47c975727ad9555cae84eb6997486 (diff) | |
| download | jquery-ui-1d3b8ff78eaa3d64a839ba34af34d1e8b24f82af.tar.gz jquery-ui-1d3b8ff78eaa3d64a839ba34af34d1e8b24f82af.zip | |
Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues.
Diffstat (limited to 'demos/position')
| -rw-r--r-- | demos/position/default.html | 150 |
1 files changed, 46 insertions, 104 deletions
diff --git a/demos/position/default.html b/demos/position/default.html index ad5a3d874..f94d316e3 100644 --- a/demos/position/default.html +++ b/demos/position/default.html @@ -12,126 +12,68 @@ <script src="../../ui/jquery.ui.position.js"></script> <link rel="stylesheet" href="../demos.css"> <style> - #parent { - width: 60%; - height: 40px; - margin: 10px auto; - padding: 5px; - border: 1px solid #777; - background-color: #fbca93; - text-align: center; + body { + margin: 0; + padding: 0; } - .positionable { - position: absolute; - display: block; - right: 0; - bottom: 0; - background-color: #bcd5e6; - text-align: center; + body > div[style*='display'] { + /* Workaround */ + /* position: absolute; */ } - #positionable1 { - width: 75px; - height: 75px; + .blue { + background: blue; + float: left; + width: 100px; } - #positionable2 { - width: 120px; - height: 40px; + .red { + background: red; + float: left; + overflow-y: hidden; } - select, input { - margin-left: 15px; + .content { + width: 2000px; + height: 400px; + border: 2px solid white; } + #uiPosition { + width: 100px; + height: 100px; + background: #ccc; + } + </style> <script> $(function() { - function position() { - $( ".positionable" ).position({ - of: $( "#parent" ), - my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(), - at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(), - collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val() - }); - } - - $( ".positionable" ).css( "opacity", 0.5 ); - - $( "select, input" ).bind( "click keyup change", position ); - - $( "#parent" ).draggable({ - drag: position + $( "#redBlock" ).css({ + width: $( window ).width() - $( "#blueBlock" ).width() + }); + $( ".block" ).css({ + height: $( window ).height() }); - position(); + $( "button" ).on('click', function (e) { + $( "#uiPosition" ) + .position({ + my: "left top", + at: "left bottom", + of: e.target, + within: $( "#redBlock" ), + collision: "flip" + }); + }); }); </script> </head> <body> -<div id="parent"> - <p> - This is the position parent element. - </p> -</div> - -<div class="positionable" id="positionable1"> - <p> - to position - </p> -</div> - -<div class="positionable" id="positionable2"> - <p> - to position 2 - </p> -</div> - -<div style="padding: 20px; margin-top: 75px;"> - position... - <div style="padding-bottom: 20px;"> - <b>my:</b> - <select id="my_horizontal"> - <option value="left">left</option> - <option value="center">center</option> - <option value="right">right</option> - </select> - <select id="my_vertical"> - <option value="top">top</option> - <option value="center">center</option> - <option value="bottom">bottom</option> - </select> + <div class="block blue" id="blueBlock"></div> + <div class="block red" id="redBlock"> + <div class="content"> + <button>Position</button> + </div> </div> - <div style="padding-bottom: 20px;"> - <b>at:</b> - <select id="at_horizontal"> - <option value="left">left</option> - <option value="center">center</option> - <option value="right">right</option> - </select> - <select id="at_vertical"> - <option value="top">top</option> - <option value="center">center</option> - <option value="bottom">bottom</option> - </select> - </div> - <div style="padding-bottom: 20px;"> - <b>collision:</b> - <select id="collision_horizontal"> - <option value="flip">flip</option> - <option value="fit">fit</option> - <option value="flipfit">flipfit</option> - <option value="none">none</option> - </select> - <select id="collision_vertical"> - <option value="flip">flip</option> - <option value="fit">fit</option> - <option value="flipfit">flipfit</option> - <option value="none">none</option> - </select> - </div> -</div> -<div class="demo-description"> -<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset. -<br>Drag around the parent element to see collision detection in action.</p> -</div> + <div id="uiPosition"></div> + </body> </html> |