Bootstrap 3 's box-sizing style causes the Ueditor control's picture to not scale correctly _javascript tips for solutions

Source: Internet
Author: User

Ueditor component is a set of open source Web online WYSIWYG editor, which has the features of lightweight, customizable, user experience and so on, and is very powerful based on the MIT Protocol. Recently in the use of the process found in the upload of pictures (or insert an existing expression package pictures) can not be normal scaling, select the picture, with the mouse click and drag the picture edge of the small label, the picture can only be reduced can not enlarge. Tried many methods have no way to solve, even check the JS source code, also did not find any anomalies.

Later inadvertently found that the page introduced bootstrap, and bootstrap default will box-sizing style unified set to Border-box. Details can be viewed in the bootstrap publish log: http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

The definition and usage of the box-sizing style can be seen here: http://www.w3school.com.cn/cssref/pr_box-sizing.asp

Bootstrap with influence in CSS:

*,
*:before,
*:after {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
Box-sizing:border-box;
}

We just need to redefine the CSS on the page to overwrite the above style in bootstrap, such as:

. Edui-container *{
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
Box-sizing:content-box
}
. Edui-container *:before,
. Edui-container *:after {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
Box-sizing:content-box;
}

*. Edui-container is the CSS class used on the parent element that references the Ueditor component.

The above is a small set to introduce the bootstrap 3 of the box-sizing style led to Ueditor control of the picture can not be normal scaling of the solution of all the narration, I hope to help you, if you have any questions welcome to my message, small series will promptly reply to everyone!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.