How can I allow resizable() to increase size beyond initial size?


Tags: javascript,jquery,css,jquery-ui

Problem :

Is there a way to decouple css's max-height and max-width from the limits used by JQuery-UI's resizable()?

I have a div that, when initially created, should be limited in size:

.my-div {
  max-width: 40em;
  max-height: 50%;
}

I want it to be resizable beyond its initial size, but unfortunately resizable() seems to use these attributes to also determine the maximum size for resizing. Trying to override that by passing maxHeight and maxWidth options doesn't work. Is there a way to solve this, or some other-work around that will allow me to limit the initial size of the div and later on allow it to increase via resizable()?

I've found an identical question on jquery.com, but it's unanswered there.

A small reproducing jsfiddle - how can I allow resizing the div to see the ".com" suffix, while keeping only the "stackoverflow" word visible at first?



Solution :

I ended up just implementing the "maximum" logic on the div manually to limit its size, instead of relying on max-width:

if ($div.width() > limit) $div.css('width', limit);

http://jsfiddle.net/yzn5pnhn/2/


    CSS Howto..

    How to position a background image without background-position property

    How to disable
    tags inside
    by css?

    Css: how to combine table and column specification into a single selector?

    How to programmatically check CSS styles for particular elements? [duplicate]

    How to display highlighted sprite

    How to dynamically change the line height of each line in content editable div in php jquery?

    how to make div with image like below in html and css

    How to conditionally render CSS and JavaScript inside head element of an HTML

    how to display only 100 rows of 1000 from a database with options to go to next 100 and previous 100 in html/php/css/js [closed]

    How to animate two divs in html / css to make a semi-circle transition?

    How to reach CSS zen?

    how to insert css into html for blogger gadget

    How do I prevent text from flowing onto different sections of a page?

    how to change a css class style through javascript?

    how to fit the background image to the containing anchor element?

    How do I stop this div's width from decreasing?

    How to add javascript expression's output to my CSS?

    How to style “submit” inputs on mouseover, click?

    How can CSS interfere with JavaScript?

    How to make the background image responsive

    How to center this on screen

    How to remove gap between elements when using CSS3 table-row/header/footer-group in Firefox?

    how to add a permanent line on top of ios7 in phonegap

    How to set background texture to 50% of the page in css

    How to customize devise login and signup forms created using the simple_form gem?

    How can I align two icons on my webpage next to each other?

    How to fix side bar and header using CSS for JS & jQuery Scroller

    How can we retrive style from css by selector without creating element?

    Bootstrap with Picture Slideshow

    How to create this responsive grid of different sized images with CSS & HTML, example below