CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Owaiz Yusufi
Owaiz Yusufi

Reputation: 918

jQuery UI : How can I set the resizing limit, aspect ratio when I increase/decrease the size of the div

I have a div tag, it is ( div tag ) resizable and inside that I have a h1 tag ( or it would be any tag ).

The Problem :

I am having 2 problems :

  1. The aspect ratio is not working properly as I want means "when I increase/decrease the size of the div its height gets larger" so how can I set it properly and

  2. I want to fix the smallest width on resizing means "if on decreasing the size it reached to 27px it stop decreasing."

Code

$('.draggable_element').each(function() {
        $(this).resizable({
        autoHide: true,
      handles: 's,e,w',
      aspectRatio: 1/9
    });
})

Here is my jsFiddle

UPDATE :

I think I have not properly explained my first problem to know what's the first problem please visit to my fiddle link try to resize (increase/decrease) the div from left side or right side the height of the div will automatically increase that the problem

Upvotes: 1

Views: 388

Answers (3)

user7791702
user7791702

Reputation: 290

As I have seen your fiddle. Why you don't just remove aspectRatio. It will work better for you as you are expecting.

Please update your resize(). 

$(this).resizable({
  autoHide: true,
  handles: 's,e,w',
  minWidth: 27
});

I think you might be looking something like this one

Thought it will helpful

Upvotes: 1

Chanh Tran
Chanh Tran

Reputation: 231

For your 1st problem, you can use aspectRatio: true, it will use the initial aspect ratio based on your element's width and height.

For your 2nd problem, you can use minWidth option

$('.draggable_element').each(function() {
    $(this).resizable({
      autoHide: true,
      handles: 's,e,w',
      aspectRatio: true,
      minWidth: 27
  });
})

Upvotes: 2

Gilad.T
Gilad.T

Reputation: 135

  1. The aspectRatio should be Boolean. You can set the size using Width and Height.

Alternatively you could also try to change the ratio to '9/1': aspectRatio: 9/1, should do the work too...

  1. Set 'minWidth: 27'.

    $(this).resizable({
  autoHide: true,
  handles: 's,e,w',
  aspectRatio: true,
  minWidth: 27
});

Upvotes: 2

Related Questions