jquery ui resizable bug solution_jquery

But when helper: 'ui-resizable-helper' or animate: true is turned on, you will find that the width of the official example is automatically increased by 10PX. After carefully looking at the source code, I found the following problems: (pictured)


No wonder the width is automatically added using padding
This problem exists in IE firefox.
This problem is more difficult to find, but you can test it with the following code:

Copy code The code is as follows:

test

Just put the above

#resizable { width: 350px; height: 150px; padding: 0.5em; }
#resizable h3 { text- align: center; margin: 0; }

changed to:

#resizable { width: 350px; height: 150px; }
#resizable h3 { text-align: center; margin : 5px; }

That’s it.

Actually, if you look carefully, you will find that there are still problems:

In fact, it is caused by the border size of ui-widget-content being 1px, so we changed the width of #resizable to be reduced by 2px

Modify code:

#resizable { width: 350px; height: 150px; }

is:

#resizable { width: 348px; height: 150px; }

Under testing, it’s normal.

I found that there are quite a few minor problems with JQUI....