The box-sizing style of Bootstrap 3 causes the image of the UEditor control to fail to scale properly,

Source: Internet
Author: User

The box-sizing style of Bootstrap 3 causes the image of the UEditor control to fail to scale properly,

The UEditor component is a set of open-source, WYSIWYG web text editors provided by Baidu. It is lightweight, customizable, and focuses on user experience. It is powerful Based on the MIT protocol. During recent usage, we found that the uploaded images (or inserted images in an existing table package) cannot be scaled normally. Select the image and click and drag the small tab on the image edge with the mouse, images can only be zoomed in or out. I tried many methods and couldn't solve it. I even checked the js source code and didn't find any exceptions.

Later, we accidentally discovered that Bootstrap was introduced on the page, and Bootstrap set the box-sizing style to border-box by default. For more information, see the Bootstrap release log: http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

For the definition and usage of the box-sizing style, see here: http://www.w3school.com.cn/cssref/pr_box-sizing.asp

Influential css in Bootstrap:

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

We only need to redefine css on the page to overwrite the above style in Bootstrap, for example:

.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 to reference the parent element of the UEditor component.

The above is a full description of the box-sizing style of Bootstrap 3 that causes the image of the UEditor control to be unable to scale normally. I hope it will be helpful to you, if you have any questions, please leave a message. The editor will reply to you in time!

Related Article

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.