Why do bullet points disapear when I change the height of a list?
Question
This list has a padding: 0; margin-left: 10px padding: 0; margin-left: 10px . Bullet points work fine, appearing in the left margin. However, when I add height: 800px; overflow-y: hidden height: 800px; overflow-y: hidden , the bullet points suddenly disappear. Why? I can see no reason why overflow-y should affect anything appearing in the left margin of an element.
In the example below, the additional rules are applied with javascript, but this is not relevant (except to illustrate the end-goal of the exercise). The same happens if I apply them directly.
Searching for this finds me many examples of bullet points disappearing with overflow: hidden , which is understandable, but I am unable to see why any of these problems apply to overflow-y , nor am I able to find anyone else experiencing this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test List</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-darkness/jquery-ui.css" type="text/css" media="all">
<style>
.highlights {
margin-left: 10px;
width: 500px;
padding: 0;
}
</style>
<script>
$(document).ready(
function() {
var $h = $('ul.highlights');
if ($h.height() > 800) {
$h.css('overflow-y', 'hidden');
$h.css('height', '800px');
var expand = document.createElement('span');
expand.innerHTML = 'Show all';
$h.after(expand);
$(expand).click(
function() {
$h.hide().css('height', 'auto').slideDown();
$(this).hide();
}
);
}
}
);
</script>
</head>
<body>
<ul class="highlights">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis luctus ex neque, quis lobortis dui efficitur ac.</li>
<li>In ornare iaculis sapien, id faucibus erat vestibulum sit amet.</li>
<li>Suspendisse odio erat, suscipit vel sem et, gravida pretium felis.</li>
<li>Vestibulum finibus ex lacus, sit amet bibendum nunc auctor efficitur.</li>
<li>Donec in diam imperdiet, posuere velit sed, auctor nulla.</li>
<li>Duis at lorem arcu.</li>
<li>Maecenas in velit id magna congue commodo.</li>
<li>Integer congue nunc hendrerit, lobortis ligula at, finibus tortor.</li>
<li>Donec euismod, tellus ut sollicitudin consequat, elit nulla imperdiet dui, eu aliquet odio magna id felis.</li>
<li>In varius a turpis eu ornare.</li>
<li>Proin eu pharetra felis.</li>
<li>Nunc tempus odio lectus, non molestie eros facilisis aliquet.</li>
<li>Aenean magna urna, ultricies ac faucibus sit amet, viverra ut ante.</li>
<li>Proin ornare lacinia nisi vitae aliquam.</li>
<li>Morbi at enim ut erat tempor hendrerit.</li>
<li>Donec suscipit id massa feugiat placerat.</li>
<li>Aliquam luctus maximus lectus, id rutrum ligula tincidunt vel.</li>
<li>Sed vehicula tellus in nunc sagittis vulputate.</li>
<li>Integer bibendum quam sit amet lacinia dignissim.</li>
<li>Etiam ultricies ultricies nibh elementum fermentum.</li>
<li>Ut vitae risus lectus.</li>
<li>Mauris ac convallis sapien, quis euismod arcu.</li>
<li>Vestibulum viverra erat a lacinia molestie.</li>
<li>Fusce et turpis molestie, pretium ex varius, consectetur orci.</li>
<li>Curabitur eu diam in tellus tempus pretium.</li>
<li>In accumsan tortor nec congue placerat.</li>
<li>Duis laoreet rhoncus libero eget posuere.</li>
<li>In lacinia, dolor sed fringilla ultrices, diam eros pulvinar ligula, non maximus enim orci vel diam.</li>
<li>Praesent sollicitudin libero augue, nec pretium mauris luctus id.</li>
<li>Proin id turpis auctor, lacinia nunc et, pretium orci.</li>
<li>Nulla vel eleifend leo, sed fringilla ligula.</li>
<li>Maecenas convallis arcu ac gravida ornare.</li>
<li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla malesuada dui et urna vulputate pharetra.</li>
<li>Maecenas eu dictum orci.</li>
<li>Morbi auctor finibus pretium.</li>
<li>Nam consequat luctus vehicula.</li>
<li>Phasellus eu arcu sed ipsum ultricies mollis.</li>
<li>Etiam at porttitor est.</li>
<li>Nulla pellentesque pretium tempus.</li>
<li>Cras molestie pharetra sem eu iaculis.</li>
<li>Nam consequat, arcu id tincidunt pretium, sem ipsum interdum est, non pellentesque felis eros sit amet lectus.</li>
<li>Nulla laoreet congue elit, non aliquam orci rutrum a.</li>
<li>Aenean fringilla consequat nisi, tempus dictum libero finibus sed.</li>
<li>Suspendisse eget ligula quam.</li>
<li>Nulla in ornare turpis.</li>
<li>Donec sit amet eros at tortor fermentum aliquet.</li>
<li>Etiam semper eleifend ante non vehicula.</li>
<li>Sed id diam erat.</li>
<li>Pellentesque laoreet gravida finibus.</li>
<li>Vivamus maximus ornare mi, ut gravida leo tincidunt vel.</li>
<li>Mauris congue laoreet imperdiet.</li>
<li>In hac habitasse platea dictumst.</li>
</ul>
</body>
</html>
4 answers
solution1
1 2014-09-03 14:06:55
This happens because when you hide the overflow, the content is clipped when it overflows the element's content area . The bullets by default are considered to be outside the "content area". The easiest solution is to use CSS on the list and set list-style-position:inside; .
Also, as the spec says :
"In CSS 2.1, a UA may hide the marker if the element's 'overflow' is other than 'visible'. "
solution2
1 2014-09-03 14:07:27
Overflow-y will hide the bullets. I guess the best explanation is that bullets are considered outside the element. If you highlight the LI in a developer tool, you'll see the bullet itself isn't highlighted. Easy fix tho:
.highlights li {
margin-left: 1em;
}
solution3
0 2014-09-03 14:10:57
apply this code
.highlights li {list-style-position:inside;}
solution4
0 2014-09-03 14:14:40
$h.css('padding-left', '20px');
它也会解决你的问题
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.