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 BootstrapBox-sizingUnified style settingsBorder-box. 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.

 

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.