The challenge of overlapping elements in jQuery UI resizable

Encountering an issue with the resizable class in jQuery UI (http://jqueryui.com/resizable/). When resizing begins, all divs below move to overlap with the resizing div. Upon inspecting the js console in chrome, it appears that resizable applies inline styles such as "position: absolute; top: 24px; left: 593.90625px; height: 218px; width: 161px;", causing the overlapping. Removing these inline styles stops the overlap but also prevents the div from being resized.

HTML :

<div id="widget1" class="widget taille-2-2 drag">
    Val : <span id="span1">10</span>
</div>
<div id="widget2" class="widget taille-1-1 drag">
    Val : <span id="span2">20</span>
</div>
<div id="widget3" class="widget taille-2-1 drag">
    Val : <span id="span3">30</span>
</div>

CSS :

.widget {
    padding: 2px;
    border: 2px solid #ccc;
    float: left;
    overflow: hidden;
}

.taille-1-1 {
    width: 47px;
    height: 47px;
}

.taille-2-1 {
    width: 104px; /* taille*2+padding*2+border*2+tile.margin*2 */
    height: 47px;
}

.taille-2-2 {
    width: 104px;
    height: 104px;
}

.drag {
    position: relative;
    margin: 3px;
}

Javascript :

$(".drag").draggable(
{
     helper: "clone"
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});

View the fiddle here.

Answer №1

After much trial and error, I finally cracked the code to fix the issue at hand, even though the inner workings still elude me:

Here is the Javascript solution that did the trick:

$(".drag").draggable(
{
     helper: "clone",
     addClasses: false
});
$(".widget").resizable(
{
    grid: [57,57],
    maxHeight: 332,
    maxWidth: 218
});

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

How to import a JSON file in AngularJS using Node.js

I am currently working with NodeJS and AngularJS to handle some data. Within my Angular application, I am trying to access a JSON file and distribute its content into separate controllers. Right now, I am utilizing the http.get method within a controller ...

Steps for adjusting the length in the getRangeLabel function of mat paginator

@Injectable() export class MyCustomPaginatorIntl extends MatPaginatorIntl { public getRangeLabel = (page: number, pageSize: number, length: number): string => { if (length === 0 || pageSize === 0) { return `${ ...

Dynamic Material UI TextField underline width using JSX in React

I recently encountered an issue while trying to add padding to my TextField component. I applied the padding to the root 'style' property, but it caused the underline to overflow beyond the designated area to the right by the same amount as the p ...

Exploring Material UI: Customizing the styling of components within TablePagination

Is it possible to customize the styling of buttons within the actions panel of the TablePagination component? import { withStyles } from '@material-ui/core'; import MuiTablePagination from '@material-ui/core/TablePagination'; const st ...

Encountered an error while trying to run npm start

I set up a Vagrant virtual machine, installed Node.js (v 6.9.1), and NPM (v 4.0.0). After cloning a Node.js app using Git clone, I ran the npm install command in both the root folder and the app folder. However, when attempting to start the app with npm st ...

Optimizing Bootstrap for Tablet Browsing in Internet Explorer

Hey there, I have a question regarding Internet Explorer and tablets. As I revamp this website and integrate Bootstrap into it, my focus is currently on the small-sized IE browser for tablets. My dilemma arises from not knowing if there are any tablets th ...

What is the best way to implement Media Queries in the Next.js application Router?

I am currently working with Next.js 13 and the App Router. Within my client component, I have implemented media queries in JavaScript to customize sidebar display for small and large screens. "use client"; export default function Feed() { co ...

Tips for activating the default 500 error page in Next.js

I'm having trouble getting Next.js to display its default 500 error page. While most sources discuss creating a custom error page, the Next.js documentation only briefly references their built-in 500 error page. I want the default page to show up when ...

Having trouble saving user input from a form to a database using axios, mongodb, and vue?

I am a beginner in working with Vue and I'm currently facing an issue while trying to submit user input data to my MongoDB using axios. Although the data from the database is displayed on the page, I can't seem to get the form input data to succe ...

Angular Script Linking

Hello there! I am currently attempting to add an HTML tag to my response message, but for some reason it isn't working as expected. Here is a snippet of my controller code (in case the API indicates that the account doesn't exist - see this scr ...

Tips for creating a function that utilizes a select option value

I'm struggling with a form that includes two select inputs. I want the second input to only be enabled if the first one has been selected. I attempted using an onclick event, but it didn't work out as expected. Can anyone provide assistance? (apo ...

Trouble with stroke width in Svg bezier path while using a mask

I'm having trouble hiding part of a path using a mask. When I apply the mask, the stroke width doesn't seem to work anymore. Any suggestions on why this is happening and how to fix it? svg { position: absolute; width: 100%; height: 100%; ...

Implementing a delay using setTimeOut function to execute an action upon user input

Take a look at this code snippet: $("#test").on("keyup", (e) => { if(e.target.value.length === 3) { setTimeout(() => { console.log("fired") }, 2000) } }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.m ...

"Learn the process of transferring data from one controller to another in your application

After adding categoryCtrl and ProductCtrl, the code line: console.log(category); is functioning correctly. I am looking for a way to bind this data to the product controller using a for loop or any other method. .controller('CategoryCtrl', funct ...

The object is given a value in the form of a string, even though it is a strongly-typed variable

I'm encountering something unusual in my code. In the following example, there is a (change) event that captures the current value selected by the user from a dropdown menu. <div style="padding-right: 0; width: 100%;"> <label st ...

Tips for minimizing Angular $digest-cycle invocations

Issue In my application, I have noticed that some callbacks are being called excessively during the $digest cycle. This high frequency of calls is causing performance concerns as these callbacks are triggered way more times than expected, sometimes even e ...

JavaScript query: Why does code return NULL in Internet Explorer but functions correctly in FireFox?

In my external .js file, I have successfully linked this function... function SubmitAge(age, UpdatePanelID, HiddenAgeID) { $get(HiddenAgeID).value = age; __doPostBack(UpdatePanelID); } I am triggering it from an onClick event of an a href="#" tag. ...

Chakra UI Not Displaying Proper Responsiveness on the User Interface

I recently integrated Chakra UI for styling a project on Next.js, and while most components are functioning properly, I am facing challenges with implementing responsive layouts. The styles do not seem to adapt when the screen size is reduced. Here's ...

What is the limit of CSS includes that IE can process?

While working on theming Drupal, I encountered an unusual issue. After enabling a few modules that added 5 to 10 link tags to the page, I noticed a strange behavior in different browsers. Firefox successfully added the new stylesheets to the cascade, but i ...

Is it possible to export CSS stylesheets for shadow DOM using @vanilla-extract/css?

I have been exploring the use of @vanilla-extract/css for styling in my React app. The style method in this library exports a className from the *.css.ts file, but I need inline styling to achieve Shadow DOM encapsulation. During my research, I came acros ...