我不想让我的列在浏览器视口缩小时不堆积,而是希望这些列保持原样,但要显示水平滚动条,以便较小设备上的人可以向右滑动即可滚动。
因为我正在使用flex,这有可能吗?
let result = _
.chain(res.data)
.groupBy("_id.year")
.value();
result = _.map(result, (yearlyValues, key) => {
return {
[key]: _.map(yearlyValues, yearlyValuesItems => {
return {
[yearlyValuesItems._id.month]: yearlyValuesItems.count
};
})
};
});
result = _.map(result, (value, key) => {
return _.map(value, (innerValues, innerKey) => {
return innerValues;
})
})
result = _.flatten(result);
result = _.map(result, (value, key) => {
return _.map(value, (items, keys) => {
return _.map(items, (a, b) => {
return a
})
})
});
for (var i in result) {
final_count.push(_.flatten(result[i]));
}
console.log(final_count);
$scope.labels_monthly = monthNames;
$scope.series = Object.keys(final_count);
$scope.data = Object.values(final_count);
$scope.options = {
legend: {
display: true
}
};
body {
color: #333;
font-family: Helvetica Neue,Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: 400;
}
.board-container {
background-color: rgb(0, 121, 191);
height: 100%;
position: relative;
background-size: cover;
overflow: hidden;
}
#board-surface {
display: flex;
flex-direction: column;
}
#board-surface, body, html {
height: 100%;
}
#content {
flex-grow: 1;
overflow-y: auto;
outline: none;
}
.board-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.board-main-content {
height: 100%;
display: flex;
flex-direction: column;
margin-right: 0;
transition: margin .1s ease-in;
}
.board-canvas {
position: relative;
flex-grow: 1;
}
/*#board {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
margin-bottom: 8px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 8px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}*/
.list-wrapper {
width: 272px;
margin: 0 4px;
height: 100%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
white-space: nowrap;
background-color: #cccccc;
}
.list {
background: #e2e4e6;
border-radius: 3px;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 100%;
position: relative;
white-space: normal;
}
.list-card {
background-color: #fff;
border-radius: 3px;
box-shadow: 0 1px 0 #ccc;
cursor: pointer;
display: block;
margin-bottom: 8px;
max-width: 300px;
min-height: 20px;
position: relative;
text-decoration: none;
z-index: 0;
}
答案 0 :(得分:0)
演示:https://codepen.io/anon/pen/wxJGMx?editors=0110
我能够在flex容器上实现水平滚动。我已将min-width赋予.list-wrapper,并将以下样式添加至#board项目:
.list-wrapper {
min-width: 272px;
width: 272px;
margin: 0 4px;
height: 100%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
white-space: nowrap;
background-color: #cccccc;
}
#board {
display: flex;
overflow: scroll;
}