PanelBar展开过大,然后向上滑动
PanelBar expands too far, then slides up
我有一个显示几个 divs/ULs 的面板栏。例如,当列表的宽度设置为 40% 时,会导致面板栏比应有的向下滑动得更远,然后跳回 'should' 所在的位置。去掉 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>
请参阅此处 fiddle:http://jsfiddle.net/u48kLrem/
从页面列表 class 中删除 width:40%,它会按预期滑动。
我不知道,伙计。我怀疑它与文本换行(或某些换行)有关并导致它计算错误的高度。可能只是他们的编码不好,但一个简单的修改会导致跳转消失。此外,此修改也应该使它更 reliable/future-proofed。
.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% */
}
我有一个显示几个 divs/ULs 的面板栏。例如,当列表的宽度设置为 40% 时,会导致面板栏比应有的向下滑动得更远,然后跳回 'should' 所在的位置。去掉 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>
请参阅此处 fiddle:http://jsfiddle.net/u48kLrem/
从页面列表 class 中删除 width:40%,它会按预期滑动。
我不知道,伙计。我怀疑它与文本换行(或某些换行)有关并导致它计算错误的高度。可能只是他们的编码不好,但一个简单的修改会导致跳转消失。此外,此修改也应该使它更 reliable/future-proofed。
.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% */
}