Search code examples
csskendo-uikendo-panelbar

PanelBar expands too far, then slides up


I have a panelbar which displays a few divs/ULs. The lists, when their width is set to 40%, for example, cause the panelbar to slide farther down than it should, and then jump back up to where it 'should' be. Remove the 40% on the UL, and everything works as expected.

Version 2015.3.930 has this issue, whereas older versions (randomly picked 2011.3.1407) do not.

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

See fiddle here: http://jsfiddle.net/u48kLrem/

remove the width:40% from the pagelist class, and it slides as expected.


Solution

  • I don't know, man. I suspect that it has to do with the text wrapping (or something wrapping) and causing it to miscalculate the height. Probably just bad coding on their part, but a simple modification causes the jump to disappear. Also, this modification should make it more reliable/future-proofed too.

    .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% */
    }
    

    Demo: http://jsfiddle.net/jmarikle/2ekxpuu6/