Bootstrap fixed the BUG that the date control was masked by the modal box. bootstrap Mode

Source: Internet
Author: User

Bootstrap fixed the BUG that the date control was masked by the modal box. bootstrap Mode
Bootstrap BUG fixes about the date control being masked by the modal box

When using the bootstrap-datepicker.js plug-in, the date value cannot be filled because the date value is filled in the modal box and the value of the modal box overwrites the date control. As shown in:

The essential reason is: When we click the date control to fill in the date, the bootstrap-datepicker.js helped us dynamically generate the class defined in datepicker handler, its style is:

.dropdown-menu {  position: absolute;  top: 100%;  left: 0;  z-index: 1000;  display: none;  float: left;  min-width: 160px;  padding: 5px 0;  margin: 2px 0 0;  font-size: 14px;  text-align: left;  list-style: none;  background-color: #fff;  -webkit-background-clip: padding-box;          background-clip: padding-box;  border: 1px solid #ccc;  border: 1px solid rgba(0, 0, 0, .15);  border-radius: 4px;  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);}

Note: The bootstrap version used in this article is 3.2.2.

Because the z-index value of the modal box is greater than the z-index value of the dropdown-menu of the date control, it is hidden under the modal box, therefore, you only need to modify the z-index value of dropdown-menu to 10000. After the modification, it will be displayed normally, for example:

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.