Reputation: 92
I am building a UI component that has columns of information. Each column needs to be individually scrollable. I have found that on SO.com before, but I am having trouble reconciling that with the other requirement - that the page scrolls horizontally to show columns that do not fit on screen.
I have the horizontal scrolling working but cannot get it to work in conjunction with individual column scrolling. The code:
#board {
float: left;
height: 98%;
max-height: 98%;
width: 4300px; /*smaller than columns to force horizontal scroll */
margin: auto;
border: none;
overflow-x: scroll;
}
#columns {
height: 98%;
float: left;
width: 4800px; /* need this much width */
margin: auto;
border: none;
overflow-x:auto;
}
.column {
float: left;
padding-bottom: 50px;
width: 240px;
height: 100%;
max-height: 100%;
padding: 5px;
padding-bottom: 100px;
margin-left: 5px;
overflow-y: auto;
overflow-x: hidden;
}
<div id="board">
<div id="columns">
<div id="col1" class="column">
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
</div>
<div id="col2" class="column">
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
<div class="card"> ...content... </div>
</div>
<!-- 12-16 more columns -->
</div>
</div>
Edited to fix id vs class issue in html.
Upvotes: 1
Views: 1722
Reputation: 586
I tried to simplify your code to only include what's necessary to solve your problem, but it should work. There are a couple errors in your CSS too: you have a style for #boards
but the outer container has a class boards
not an id, and you have a style for #columns
but the middle inner container has an id of positions
.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.board {
height: 100%;
width: 200px;
overflow-x: scroll;
}
#columns {
height: 100%;
width: 500px;
white-space: nowrap;
}
.column {
vertical-align: top;
height: 100%;
display: inline-block;
width: 150px;
overflow-y: auto;
overflow-x: hidden;
}
.card {
height: 200px;
background: #F00;
margin-bottom: 5px;
}
<div class="board">
<div id="columns">
<div class="column">
<div class="card">...content...</div>
<div class="card">...content...</div>
<div class="card">...content...</div>
<div class="card">...content...</div>
</div>
<div class="column">
<div class="card">...content...</div>
<div class="card">...content...</div>
<div class="card">...content...</div>
</div>
<div class="column">
<div class="card">...content...</div>
</div>
Upvotes: 1