CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Ionut Flavius Pogacian
Ionut Flavius Pogacian

Reputation: 4801

Resizable div element shrinks before enlarging on start event

For some reason, my resizable div gets smaller when I try to resize it;

I have not set any property for this element;

movie here

the code to be executed on resizable event:

        $(".dragbox").resizable({
            grid: [10, 10],
            containment: 'parent',
            reflow: true,
            start: function(event, ui) {
                var id = ui.helper.context.id.split('_')[1];
                console.log(id);
                console.log('start ui size width: ' + ui.size.width);
            },
            stop: function(event, ui) {
                console.log('stop ui size width: ' + ui.size.width);
                //do not update the widgets pos/size not even by accident when we are in forced rearrange mode
                if (jQuery('#widget_content').hasClass('floating-dashboard-widgets'))
                    return false;
                var id = ui.helper.context.id.split('_')[1];
                //console.log(id);
                $.ajax({
                    type: "POST",
                    url: "<?php echo Yii::app()->baseUrl . '/user/dbview/update/id/'; ?>" + id,
                    data: {data: {width: ui.size.width, height: ui.size.height, parent_width: get_parent_width(), parent_height: get_parent_height()}},
                    success: function(data) {
//                        console.log(data);
                        if (data.status == true) {
                            ui.size.width = data.info.width;
                        }
                    },
                    dataType: 'json',
                });
            }
        });

Upvotes: 1

Views: 297

Answers (1)

Jochem Kuijpers
Jochem Kuijpers

Reputation: 1797

Your resizable div appears to have a padding.

Removing it (possibly moving it to a child element) might fix it. :)

Upvotes: 2

Related Questions