Search and Top Navigation
#6134 closed bug (invalid)
Opened October 01, 2010 09:18AM UTC
Closed November 11, 2012 09:05AM UTC
resizable and containment
| Reported by: | loti | Owned by: | loti |
|---|---|---|---|
| Priority: | minor | Milestone: | 2.0.0 |
| Component: | ui.resizable | Version: | 1.8.5 |
| Keywords: | containment position absolute | Cc: | |
| Blocked by: | Blocking: |
Description
When the containment object is out of the parent container the absolute position correction is not working.
The example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calendar</title>
<script type="text/javascript" src="Script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="Script/jquery.ui.core.js"></script>
<script type="text/javascript" src="Script/jquery.ui.widget.js"></script>
<script type="text/javascript" src="Script/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="Script/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="Script/jquery.ui.resizable.js"></script>
<link rel="stylesheet" href="Theme/jquery.ui.all.css" type="text/css" />
<script type="text/javascript">
counter = 0;
function boxproperties(o, pos) {
var top = pos.top - 50;
var startMin = top * 2.5;
var startTime = new Date(1,1,1,6,startMin,0,0);
var days = new Array('Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun');
var day = parseInt((pos.left - 50) / 80)
var length = o.height();
var lengthMin = length * 2.5;
o.find('.calendar-item-time').html(days[day] + ',' + startTime.getHours() + ':' + startTime.getMinutes() + ' | ' + lengthMin + ' min');
}
$(document).ready(function () {
$('#attendance').draggable({
cursor: 'crosshair',
grid: [80, 2],
opacity: .5,
containment: '#calendar_body',
helper: 'clone',
drag: function (ev, ui) {
boxproperties(ui.helper, ui.position);
},
stop: function (ev, ui) {
counter++;
var o = $(this).clone();
o.attr('id', 'attendance_' + counter);
o.css({ top: ui.position.top, left: ui.position.left });
o.find('.calendar-item-title').html(o.find('.calendar-item-title').html() + '_' + counter);
boxproperties(o, ui.position);
$('#calendar_container').prepend(o);
o.resizable({
handles: 'all',
grid: [80, 2],
maxWidth: 80,
minWidth: 80,
minHeight: 2,
containment: '#calendar_body',
resize: function (ev, ui) {
boxproperties(ui.helper, ui.position);
},
stop: function (ev, ui) {
boxproperties(ui.helper, ui.position);
}
}).draggable({
cursor: 'crosshair',
grid: [80, 2],
opacity: .5,
containment: '#calendar_body',
drag: function (ev, ui) {
boxproperties(ui.helper, ui.position);
},
stop: function (ev, ui) {
boxproperties(ui.helper, ui.position);
}
});
}
});
});
</script>
</head>
<body>
<div id="middle">
<div id="calendar_container" style="position: relative; top:0px; left: 0px;">
<div id="attendance" class="attendance" style="width: 80px; height: 24px; background-color:Blue; color: Yellow; position: absolute; left: 50px; font-size: 8px; z-index:120">
<span class="calendar-item-title">New attendance</span><br />
<span class="calendar-item-time">Drag it to the calendar</span>
</div>
<table cellpadding="0" cellspacing="0" style="position:absolute; top:30px;">
<thead>
<tr>
<td style="width:50px; height:20px;">Time</td>
<td style="width:80px;">Monday</td>
<td style="width:80px;">Tuesday</td>
<td style="width:80px;">Wednesday</td>
<td style="width:80px;">Thursday</td>
<td style="width:80px;">Friday</td>
<td style="width:80px;">Saturday</td>
<td style="width:80px;">Sunday</td>
</tr>
</thead>
<tbody id="calendar_body">
<tr style="background-color: #FFFFCC;">
<td style="height:24px;">06:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #CCFFCC;">
<td style="height:24px;">07:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #FFFFCC;">
<td style="height:24px;">08:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #CCFFCC;">
<td style="height:24px;">09:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #FFFFCC;">
<td style="height:24px;">10:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #CCFFCC;">
<td style="height:24px;">11:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #FFFFCC;">
<td style="height:24px;">12:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #CCFFCC;">
<td style="height:24px;">13:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #FFFFCC;">
<td style="height:24px;">14:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #CCFFCC;">
<td style="height:24px;">15:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #FFFFCC;">
<td style="height:24px;">16:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #CCFFCC;">
<td style="height:24px;">17:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #FFFFCC;">
<td style="height:24px;">18:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #CCFFCC;">
<td style="height:24px;">19:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr style="background-color: #FFFFCC;">
<td style="height:24px;">20:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The containing element is the <tbody>. The table is positioned absolute/top:30px. The draggable component working well but the resizable is not.
Attachments (0)
Change History (3)
Changed October 11, 2012 09:07PM UTC by comment:1
| milestone: | TBD → 2.0.0 |
|---|
Changed October 27, 2012 07:59PM UTC by comment:2
| owner: | → loti |
|---|---|
| status: | new → pending |
Thanks for taking the time to contribute to the jQuery UI project! I ported your example over to jsFiddle and I cannot recreate the problem you are describing with the neither the latest version of jQuery UI nor version 1.8.5 (which this ticket was created with - http://jsfiddle.net/tj_vantoll/h2YFj/.
Please let us know if you have any additional information that could be used to help recreate the problem.
Changed November 11, 2012 09:05AM UTC by comment:3
| resolution: | → invalid |
|---|---|
| status: | pending → closed |
Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!