Opened 9 years ago

Closed 7 years ago

#6134 closed bug (invalid)

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.

Change History (3)

comment:1 Changed 7 years ago by Scott González

Milestone: TBD2.0.0

comment:2 Changed 7 years ago by tj.vantoll

Owner: set to loti
Status: newpending

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.

comment:3 Changed 7 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

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!

Note: See TracTickets for help on using tickets.