PanelBar расширяется слишком далеко, затем скользит вверх

Question

У меня есть панель, которая отображает несколько divs/ULs. Например, списки, когда их ширина установлена ​​на 40%, заставляют панель панели скользить дальше, чем следовало бы, а затем возвращаются туда, где она должна быть. Удалите 40% на UL, и все работает как положено.

Версия 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% от класса списка страниц, и он скользит как ожидалось.

Answer 1

Я не знаю, мужик. Я подозреваю, что это связано с переносом текста (или чем-то вроде переноса) и вызывает неправильный расчет высоты. Вероятно, просто плохое кодирование с их стороны, но простая модификация заставляет переход исчезнуть. Кроме того, эта модификация должна сделать ее более надежной / ориентированной на будущее.

.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/