strange glitch found in jquery ui resizable

Experimenting with jquery UI, I came across an unusual bug. After clicking a button to make a div resizable, the div unexpectedly moves below the button.

resizable.html:

<html>
    <head>
        <link href="my.css" rel="stylesheet" type="text/css"/>
        <link href="jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery-ui.js"></script>
        <script>
        function makeResizable() {
            $("#divRes").resizable();
        }
        </script>
        <style>
        </style>
</head>
<body>
        <br><br><br><br><br><br><br><br><br><br>
        <button onclick="makeResizable();">Make Resizable</button>
        <div id="divRes" class="MyDiv"></div>
</body>
</html>

my.css:

.MyDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

Upon clicking the make resizable button, the div becomes resizable but shifts vertically beneath it.

The odd part is this: IF I eliminate the CSS in my.css and embed it inline between the

<style>
.MyDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}
</style>

OR if I modify the div declaration from:

<div id="divRes" class="MyDiv"></div>

to

<div id="divRes"></div>

and my.css to

#divRes {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

THE ISSUE DOES NOT OCCUR.

However, resorting to either of these solutions is both undesirable and illogical. The problem cannot be replicated in jsfiddle because all CSS is inline. I can provide online links to the files in both formats if needed.

jquery versions:

jQuery UI - v1.8.20 - 2012-04-30

jQuery v1.7.2 jquery.com | jquery.org/license

Thank you for any assistance.

EDIT: testing with jquery-ui 1.30.3 and jquery 1.9.1 ( latest ) still shows the issue, ruling out version problems.

EDIT2: Files uploaded here

resizable.htm: displays the problem

resizable2.htm: no issue when not using CSS classes (not preferred)

resizable3.htm: no problem when including CSS classes within the HTML file (not preferred)

Answer №1

Looks like you may be encountering a CSS problem.

When using the resizable plugin, it adds the ui-resizable class to your element with default style from jQuery UI:

.ui-resizable {
    position: relative;
}

This can cause conflicts if your CSS has position: absolute defined. To fix this issue, you can add the following rule in your CSS file:

.MyDiv.ui-resizable {
    position: absolute;
}

Alternatively, you can modify the definition for .MyDiv like so:

.MyDiv {
    position: absolute !important;
}

Answer №2

I ran into a similar issue and unfortunately none of the suggested solutions seemed to do the trick.

The problem I encountered was with the initial width of my div being set at 200px, but when attempting to resize it from the east using the mouse, the width would suddenly drop down to 170px. After some investigation, I identified the root cause within lines 302 and 303 of resizable.js and made a change from el.width() to el.outerWidth()

Here are the specific lines for reference:

this.size = this._helper ? { width: this.helper.width(), height: this.helper.height() } : { width: el.outerWidth(), height: el.height() };
this.originalSize = this._helper ? { width: el.outerWidth(), height: el.outerHeight() } : { width: el.outerWidth(), height: el.height() };

Answer №3

Check out this jsfiddle to see it in action:

HTML

<button id="resizeBtn">Make Resizable</button>
<div id="divRes" class="ResizableDiv"></div>

JavaScript

$('#resizeBtn').click(function() {    
    $("#divRes").resizable();
});

CSS

.ResizableDiv {
    position: absolute;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    padding: 0px;
    margin: 0px;
    z-index: 1;
    background-color: cyan;
}

http://jsfiddle.net/Abc123/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the text color be customized to match the brightness level of the background area being covered?

Does anyone know of a plugin or method that can automatically change the color of text or swap predefined images/icons based on the average brightness of its parent element's background? If the background is dark, it should make the text white or swit ...

Managing dynamically appearing elements in Ember: Executing a Javascript function on them

I'm currently working on a project in Ember and facing an issue with calling a JavaScript function when new HTML tags are inserted into the DOM after clicking a button. Below is a snippet of my code: <script type="text/x-handlebars" id="doc"&g ...

Leveraging CSS attribute selectors within JSX using TypeScript

With pure HTML/CSS, I can achieve the following: <div color="red"> red </div> <div color="yellow"> yellow </div> div[color="red"] { color: red; } div[color="yellow"] { color: yellow; ...

horizontal Bootstrap Image Gallery

I'm having an issue with Bootstrap Thumbnails. Currently, my thumbnails are stacked vertically like this: img01. However, I want them to be in a horizontal layout. What should I do? This is my code: HTML: <div class="hrs" align="center"> ...

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

Are custom boolean attributes supported in HTML?

When working in HTML5, we have the ability to utilize custom data-* attributes. However, since these are considered attributes, they generally require a string value. Is there a different option within HTML that allows for custom properties, where boolean ...

The feature to swap out the thumb of a range slider with an image is currently not

I'm attempting to design a unique range slider using CSS. <style> .slide-container { width: 300px; } .slider { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: #FFFFFF; outline: none; opacity: ...

How can you merge webSDK with jQuery within a Vue Component?

I am currently working on incorporating the webSDK found at into our Vue application. My goal is to load jquery only within a single component. Below is the code I have written, however, when I click the button, it does not seem to function as expected. ...

Lack of coherence in events

Currently, I am learning JS and WebApi.Net. One issue that I am facing is that part_2 is sometimes executed before part_1, even though it should be the other way around. //**** <part_1> **** var link = 'api/Values', ttMass = new Array(); ...

How come my jQuery isn't updating the class of a specific element?

I apologize if this question seems too specific to my own project, but I am facing a dilemma. I am attempting to change the color of the title of the user's current page to orange when hovering over the page name in the navigation menu. In simpler ter ...

Issue with the Bootstrap carousel jQuery plugin

Hi everyone, I need some help with creating a multiple items bootstrap carousel. I keep getting an error message that says "#Carousel".carousel is not a function TypeError: "#Carousel".carousel is not a function. Can anyone guide me on how to fix this issu ...

Concealing HTML pages in Node.js: A step-by-step guide

I have a specific requirement where my website's html pages should only be accessible to users who are logged in. However, when I used the command below, my html pages became public: app.use(express.static('public')); For instance, I do no ...

Ensure that Ajax requests are successfully executed when a user navigates away from the page

I have developed an HTML/JavaScript application that requires an AJAX request to be made when the user refreshes or closes the page in order to close the application gracefully. To achieve this, I am using the pageunload event. I have implemented the func ...

Injecting Javascript before page code in Chrome Extension Content Script allows for manipulation of webpage elements

I am currently working on developing a Chrome extension that involves injecting a script into a webpage before any other scripts present. This is crucial for my project as I am utilizing the xhook library to intercept XHR requests, which necessitates overw ...

Creating and adding nested div elements with the power of JavaScript

My goal is to utilize JavaScript for updating the CSS layout as the webpage loads. Below is the code I have been working on: var container = 0; // Total UI Container var containerTitle = 0; // Title Container var article = 0; var articleTitle = 0; var ...

Unable to receive JSON data from Ajax call

I'm encountering an issue with the WordPress feed in Json format (). When trying to read it using an ajax request, I am unable to retrieve any data in the success callback and instead receiving an error alert. Below is the snippet of my code: $.ajax( ...

Adding a class to radio buttons with a specific label using jQuery

As of now, I am utilizing jQuery to apply or remove a class when a radio button is selected. However, the issue arises when it checks all radio buttons, resulting in CSS being added to only one radio button. My HTML layout consists of rows containing eith ...

CSS: Concealing a separate div

I am working with a parent div in my code that has 2 child divs. I am hoping to find a way to hide the second child when hovering over the first child, using only CSS or JavaScript. Take a look at my Fiddle here <div class="parrent"> <div id ...

Enable or disable options with the user's permission

Currently, I am developing a WordPress plugin that will display a simple div on all pages. The code is set up to create the div, turn it into a shortcode, and then show it on each page. I want to include a checkbox in the admin settings so that users can ...

Counting Numbers with jQuery Animation from Zero to Percentage Value

I am currently working on a project where I aim to incorporate a jQuery Animated Number Counter, starting from zero and ending at a specified percentage value. The values of the counter are dynamically retrieved from a database. function timer() { if ...