PanelBar扩展得太远,然后向上滑动

时间:2015-11-12 16:53:04

标签: css kendo-ui kendo-panelbar

我有一个显示几个div / UL的面板栏。例如,当宽度设置为40%时,列表会导致面板栏向下滑动,然后再跳回到应该的位置。删除UL上的40%,一切都按预期工作。

版本2015.3.930有此问题,而旧版本(随机选择2011.3.1407)则没有。

<ul class="doctypecontainer noselect">
    <li style="clear:both;">
        <span>Truck Freight Bill (1)</span>

        <div class="doctypecontainercontent">
            <div class="docdatelabel"><input type="checkbox" />10/27/2015</div>
            <ul class="pagelist">
                <li><input type="checkbox" /><span>Page 1</span></li>
                <li><input type="checkbox" /><span>Page 2</span></li>
                <li><input type="checkbox" /><span>Page 3</span></li>
            </ul>
            <ul class="pagelist">
                <li><input type="checkbox" /><span>Page 4</span></li>
                <li><input type="checkbox" /><span>Page 5</span></li>
                <li><input type="checkbox" /><span>Page 6</span></li>
            </ul>

            <div class="docdatelabel"><input type="checkbox" />11/15/2015</div>
            <ul class="pagelist">
                <li><input type="checkbox" /><span>Page 1</span></li>
                <li><input type="checkbox" /><span>Page 2</span></li>
                <li><input type="checkbox" /><span>Page 3</span></li>
            </ul>

            <div class="docdatelabel"><input type="checkbox" />11/21/2015</div>
            <ul class="pagelist">
                <li><input type="checkbox" /><span>Page 1</span></li>
                <li><input type="checkbox" /><span>Page 2</span></li>
                <li><input type="checkbox" /><span>Page 3</span></li>
            </ul>

            <span style="clear:left; display:block;"></span>
        </div>

    </li>
</ul>

请参阅此处的小提琴:http://jsfiddle.net/u48kLrem/

从页面列表类中删除宽度:40%,并按预期滑动。

1 个答案:

答案 0 :(得分:0)

我不知道,伙计。我怀疑它与文本包装(或包装的东西)有关,并导致它错误地计算高度。他们可能只是编码不好,但是一个简单的修改会导致跳转消失。此外,这种修改也应该使其更可靠/面向未来。

.pagelist {
    padding-bottom:5px;
    list-style-type:none;
    padding-left:10px;
    width: 50%; /* change this to 50% */
    float: left;
    box-sizing: border-box; /* add this to force it to calculate
                               the padding in with the width to
                               total 50% */
}

演示:http://jsfiddle.net/jmarikle/2ekxpuu6/