library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Revert "Position: Use absolute positioning when getting scrollbar width to avoid reflows of user content. Fixes #9291 - Position - $.position.scrollbarWidth detection causes layout issues."

Browse Source 
This reverts commit 1d3b8ff78e.
This commit is contained in:
Scott González 2013-05-16 08:32:58 -04:00
parent 1d3b8ff78e
commit 0da5f9946d
2 changed files with 105 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
demos/position/default.html
View File

@ -12,68 +12,126 @@
<script src="../../ui/jquery.ui.position.js"></script> <script src="../../ui/jquery.ui.position.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
body { #parent {
margin: 0; width: 60%;
padding: 0; height: 40px;
margin: 10px auto;
padding: 5px;
border: 1px solid #777;
background-color: #fbca93;
text-align: center;
} }
body > div[style*='display'] { .positionable {
/* Workaround */ position: absolute;
/* position: absolute; */ display: block;
right: 0;
bottom: 0;
background-color: #bcd5e6;
text-align: center;
} }
.blue { #positionable1 {
background: blue; width: 75px;
float: left; height: 75px;
width: 100px;
} }
.red { #positionable2 {
background: red; width: 120px;
float: left; height: 40px;
overflow-y: hidden;
} }
.content { select, input {
width: 2000px; margin-left: 15px;
height: 400px;
border: 2px solid white;
} }
#uiPosition {
width: 100px;
height: 100px;
background: #ccc;
}
</style> </style>
<script> <script>
$(function() { $(function() {
$( "#redBlock" ).css({ function position() {
width: $( window ).width() - $( "#blueBlock" ).width() $( ".positionable" ).position({
}); of: $( "#parent" ),
$( ".block" ).css({ my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
height: $( window ).height() 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
}); });
$( "button" ).on('click', function (e) { position();
$( "#uiPosition" )
.position({
my: "left top",
at: "left bottom",
of: e.target,
within: $( "#redBlock" ),
collision: "flip"
});
});
}); });
</script> </script>
</head> </head>
<body> <body>
<div class="block blue" id="blueBlock"></div> <div id="parent">
<div class="block red" id="redBlock"> <p>
<div class="content"> This is the position parent element.
<button>Position</button> </p>
</div> </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> </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 id="uiPosition"></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>
</body> </body>
</html> </html>

2
ui/jquery.ui.position.js vendored
View File

@ -70,7 +70,7 @@ $.position = {
return cachedScrollbarWidth; return cachedScrollbarWidth;
} }
var w1, w2, var w1, w2,
div = $( "<div style='display:block;position:absolute;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>" ), div = $( "<div style='display:block;width:50px;height:50px;overflow:hidden;'><div style='height:100px;width:auto;'></div></div>" ),
innerDiv = div.children()[0]; innerDiv = div.children()[0];
$( "body" ).append( div ); $( "body" ).append( div );