Question

我在引导选项卡中使用datepickr（https://code.google.com/p/datepickr/）脚本。我的问题是，当我在选项卡中使用日期选择器时，弹出窗口在窗口的左上角位置打开，而不是在字段的下方。

在引导标签之外使用时，就像魅力一样。

我现在试图解决这个问题10个小时，没有任何运气。

任何人都可以帮我解决这个问题吗？

以下是datepickr的css：

        .calendar {
            font-family:Arial, Helvetica, sans-serif;
            font-size: 14px;
            background-color: #EEE;
            color: #333;
            border: 1px solid #777;
            padding: 5px;
            width: 14em;

        }

        .calendar .months {
            background-color: #58453F;
            color: #FFF;
            padding: 0.2em;
            text-align: center;
        }

        .calendar .prev-month,
        .calendar .next-month {
            padding: 0;
        }

        .calendar .prev-month {
            float: left;
        }

        .calendar .next-month {
            float: right;
        }

        .calendar .current-month {
            margin: 0 auto;
        }

        .calendar .months .prev-month,
        .calendar .months .next-month {
            color: #FFF;
            text-decoration: none;
            padding: 0 0.4em;
            cursor: pointer;
        }

        .calendar .months .prev-month:hover,
        .calendar .months .next-month:hover {
            background-color: #FDF5CE;
            color: #C77405;
        }

        .calendar table {
            border-collapse: collapse;
            padding: 0;
            font-size: 14px;
            width: 100%;
        }

        .calendar th {
            text-align: center;
        }

        .calendar td {
            text-align:center ;
            padding: 1px;
            width: 14.3%;
        }

        .calendar td span {
            display: block;
            color: #555;
            background-color: #F6F6F6;
            border: 1px solid #CCC;
            text-decoration: none;
            padding: 0.2em;
            cursor: pointer;
        }

        .calendar td span:hover {
            color: #FFF;
            background-color: #58453F;
            border: 1px solid #58453F;
        }

        .calendar td.today span {
            background-color: #FFF0A5;
            border: 1px solid #FED22F;
            color: #363636;
        }

我在这里发布了导致问题的部分javascript，而不是整个文件。

在调查之后，我发现当我在选项卡之外使用日期选择器时，以下变量具有值，而在选项卡中使用时，它们的值分别为0,0。

 if(obj.offsetParent) {

     do {
    inputLeft += obj.offsetLeft;
    inputTop += obj.offsetTop;

        alert(inputLeft); // show alert with values when outside of tab, alert is not shown when within tab
        alert(inputTop); // show alert with values when outside of tab, alert is not shown when within tab

} while (obj = obj.offsetParent);
} 

var calendarContainer = buildNode('div', { className: 'calendar' });
calendarContainer.style.cssText = 'display: none; position: absolute; top: ' + (inputTop + this.element.offsetHeight) + 'px; left: ' + inputLeft + 'px; z-index: 100;';
....

任何帮助将不胜感激......

问候，约翰

Answer 1

添加你的css：.tab-content{position: relative}。我认为这应该可以解决你的问题。

datepickr弹出窗口在引导选项卡之外打开

1 个答案: