Make a Trello scroll list
I am trying to restore a Trello list to an HTML page. I'm almost ready, except for one small problem. This is the code I have:
* {
font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
}
#main {
text-align: center;
padding: 10px;
}
.list {
margin: 5px;
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
display: inline-block;
max-height: 440px;
max-width: 240px;
padding: 4px 4px 0px;
background-color: rgb(226, 228, 230);
}
.list-header {
padding: 8px 4px;
position: relative;
min-height: 19px;
display: block;
line-height: 18px;
text-align: left;
}
.list-title {
cursor: pointer;
display: inline;
font-size: 15px;
font-weight: bold;
line-height: 18px;
margin: 0px;
min-height: 19px;
min-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
color: rgb(77, 77, 77);
}
.card-list {
overflow-y: auto;
overflow-x: visible;
}
.card {
overflow: auto;
padding: 6px 8px 4px;
margin-bottom: 4px;
position: relative;
display: block;
cursor: pointer;
color: rgb(77, 77, 77);
font-size: 14px;
line-height: 18px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
width: 214px;
text-align: left;
background-color: rgb(255, 255, 255);
}
.card-title {
color: rgb(77, 77, 77);
clear: both;
display: block;
font-weight: 400;
margin: 0px 0px 4px;
overflow: hidden;
text-decoration: none;
word-wrap: break-word;
background-color: transparent;
}
<p>List of cards that overflow</p>
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
<div class="card"><a class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a></div>
<div class="card"><a class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"><a class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a></div>
<div class="card"><a class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a></div>
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
<div class="card"><a class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a></div>
<div class="card"><a class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a></div>
<div class="card"><a class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a></div>
<div class="card"><a class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a></div>
</div>
</div>
</div>
<p>List of cards that does not overflow</p>
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"><a class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></div>
<div class="card"><a class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a></div>
</div>
</div>
</div>
As you can see from running the code snippet, the cards are overflowing from the list.
I have set the max-height
list to 440px
. And this is the parameter I have for div
containing the stack of cards:
.card-list {
overflow-y: auto;
overflow-x: visible;
}
I want to get the scrolling of the map inside <div class="card-list">
. I only want to have a vertical scrollbar without the scrollbar hiding the cards. This is the result I want:
But I don't want scrollbars or extra space to show up in lists with fewer cards:
I just can't figure out how to do this. How do you make stacks of cards in your container?
+3
source to share
1 answer
You need to set max-height
for the item child
. If you just want to show the vertical scrollbar, increase the width of the container to fill the full text.
.list {
max-height: 450px; /* To allow the boxes to be seen completely */
width: auto; /* Rearrange the width when there is no scroll bar */
}
.card-list {
max-height: 410px; /* To initiate vertical scroll bar */
overflow-x: visible;
overflow-y: auto;
}
.list {
width: auto; /* To remove Horizontal scroll bar */
}
#main {
text-align: center;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
}
.list {
margin: 5px;
border: 1px solid rgb(204, 204, 204);
border-radius: 3px;
display: inline-block;
max-height: 450px;
width: auto;
padding: 4px 4px 0px;
background-color: rgb(226, 228, 230);
}
.list-header {
padding: 8px 4px;
position: relative;
min-height: 19px;
display: block;
line-height: 18px;
text-align: left;
}
.list-title {
cursor: pointer;
display: inline;
font-size: 15px;
font-weight: bold;
line-height: 18px;
margin: 0px;
min-height: 19px;
min-width: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
color: rgb(77, 77, 77);
}
.card-list {
overflow-y: auto;
overflow-x: visible;
max-height: 410px;
}
.card {
overflow: auto;
padding: 6px 8px 4px;
margin-bottom: 4px;
position: relative;
display: block;
cursor: pointer;
color: rgb(77, 77, 77);
font-size: 14px;
line-height: 18px;
border: 1px solid rgb(204, 204, 204);
border-radius: 4px;
width: auto;
max-width: 220px;
text-align: left;
background-color: rgb(255, 255, 255);
}
.card-title {
color: rgb(77, 77, 77);
clear: both;
display: block;
font-weight: 400;
margin: 0px 0px 4px;
overflow: hidden;
text-decoration: none;
word-wrap: break-word;
background-color: transparent;
}
<div id="main">
<div class="list">
<div class="list-header">
<h2 class="list-title">A List of Cards</h2>
</div>
<div class="card-list">
<div class="card"> <a href="" target="_blank" class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Suspendisse elementum libero in pharetra imperdiet.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nunc quis est ut ante euismod malesuada at ac nulla.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Pellentesque pellentesque leo pellentesque luctus euismod.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Nullam ut sem faucibus, sagittis enim id, ultrices ipsum.</a>
</div>
<div class="card"> <a href="" target="_blank" class="card-title">Aliquam luctus massa eget mauris tincidunt, tincidunt scelerisque mi rutrum.</a>
</div>
</div>
</div>
</div>
+2
source to share