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.
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>
Related
I have a flex container that wraps some cards. I have implemented a horizontal scroller with flex(using flex-nowrap). The flex wrapper container is subjected to have a 36px left spacing and a 0px right spacing initially. The catch here is after the last card is scrolled I need to have a 36px right spacing.
here is what I did so far
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px -16px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding: 0px 16px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
I have given a negative right margin for the wrapper to make it look like it's flowing from the right.
Once the last element is scrolled/reached I want it to look something like this
enter image description here
One thing I noticed is my scroll-inner(flex-nowrap) is not wrapping up the entire children. I presumed if we have five children each having width 50px. The scroll-inner should show a scrollable width of 250px, Unfortunately, it's not how flex is behaving. Any help or suggestion is much appreciated.
Updating few images that show what I'm really looking for
During scrolling
After scrolling till the last card
Try
.scroll-wrapper {
overflow: hidden;
margin: auto;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: auto;
}
I have found a fix and hope this help someone.
*{
box-sizing: border-box;
}
h2 {
margin: 0;
}
body {
background: cadetblue;
}
.container {
width: 500px;
margin: 0 auto;
background: #000;
padding: 20px 36px;
}
.scroll-wrapper {
overflow: hidden;
margin-right: -36px;
}
.scroll-inner {
display: flex;
flex-flow: row nowrap;
overflow: auto;
margin: 0px;
}
.card {
height: 250px;
width: 75%;
flex: 1 0 75%;
padding-right: 40px;
margin-right: -8px;
}
.inner-wrapper {
background: #fff;
height: 250px;
}
<div class="container">
<div class="scroll-wrapper">
<div class="scroll-inner">
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
<div class="card">
<div class="inner-wrapper"><h2>Card</h2></div>
</div>
</div>
</div>
</div>
Please do answer if someone has a better solution!! Thanks
Bit of a beginner's question here - I'm sure it's been asked many times over but not knowing how to phrase the question means I've found it hard to find answers.
I'm trying to create 3 "cards" in a div which are responsive. I would like the margin between the cards to stay at 20px.
This is what I've come up with so far - the contents of the card container should add up to 965, so I'm not sure what's causing it to break and spill out, unless I'm doing something else wrong.
.container {
max-width: 1280px;
}
.card-container {
max-width: 965px;
padding: 0 20px;
display: block;
float: left;
}
.card {
width: 33%;
min-width: 295px;
}
.one {
width: 100%;
height: 200px;
background-color: #333;
display: block;
float: left;
}
.card + .card {
margin: 0px 0px 0px 20px;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
</div>
<!-- <div class="map-card"></div> -->
</div>
Thanks for any help, or redirecting to a similar topic.
You can use flex like this https://jsfiddle.net/3gg8ngm2/2/:
.container {
max-width: 1280px;
}
.card-container {
max-width: 965px;
padding: 0 20px;
display: flex;
}
.card {
width: 33%;
/* min-width: 295px; */
}
.one {
width: 100%;
height: 200px;
background-color: #333;
display: block;
float: left;
}
.card + .card {
margin: 0px 0px 0px 20px;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
<div class="card">
<div class="one"></div>
</div>
</div>
<!-- <div class="map-card"></div> -->
</div>
Or you can also use display-inline-block to your .card class.
There is a solution based on display: flex
.container {
width: 600px;
}
.card-container {
display: flex;
background: yellow;
}
.card {
width: calc(33% - 20px);
margin-right: 20px;
}
.card:first-child {margin-left:20px}
.one {
height: 200px;
background-color: #333;
}
<div class="container">
<div class="card-container">
<div class="card">
<div class="one">1</div>
</div>
<div class="card">
<div class="one">2</div>
</div>
<div class="card">
<div class="one">3</div>
</div>
</div>
</div>
Add this
.card {
width: 30%;
float:left;
min-width: 295px;
}
and will resolve your issue.
I have div(class name:xyz)to insert small 4 divs (class name:ax )in it.
I need to insert the first two divs vertically, the third one should come next to first one horizontally and the fourth one should come next to the third vertically.
But all the children are appearing vertically in side the parent.
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
You can use CSS3 Multiple column layout which in your case will be column-count: 2;, this property works in following browsers.
.xyz {
max-height: 450px;
max-width: 500px;
column-count: 2;
-webkit-column-count: 2;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
display:inline-block;
}
<div class="xyz">
<div class="ax">1</div>
<div class="ax">2</div>
<div class="ax">3</div>
<div class="ax">4</div>
</div>
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float: left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
Like this?
.xyz {
max-height: 450px;
max-width: 500px;
}
.ax {
height: 200px;
width: 200px;
margin: 0 50px 25px 0;
background-color: #C0C0C0;
float:left;
}
<div class="xyz">
<div class="ax"> </div>
<div class="ax"> </div>
<div style="clear:both"></div>
<div class="ax"> </div>
<div class="ax"> </div>
</div>
I think you are looking for this one , try with snippet
.xyz {
max-height: 450px;
max-width: 500px;
margin-right: -25px; /* newly added */
margin-left: -25px; /* newly added */
}
.ax {
height: 200px;
width: 200px;
margin: 0 25px 25px 25px;
background-color: #C0C0C0;
float:left; /* newly added */
}
<div class="xyz">
<div class="ax">1 </div>
<div class="ax">2 </div>
<div class="ax">3 </div>
<div class="ax">4 </div>
</div>
I'm trying to put some divs on the website, so it looks neat. There's one big div "container" and inside we have div "head", below it there's an empty div just to separate things and underneath it there's a div "content". My problem is: "head" is easily centered with "margin: 0 auto;", but the same line doesn't work in "content".
#container
{
background-color: darkorange;
width: 70%;
height: 800px;
margin-left: auto;
margin-right: auto;
}
#head
{
background-color: lightblue;
width: 95%;
height: 80px;
margin: 0 auto;
}
.space
{
width: auto;
height: 10px;
background-color: red;
}
#content
{
background-color: forestgreen;
width: 95%;
height: 600px;
margin: 0 auto;
}
<div id="container">
<div id="head">
<div id="reg_welcome">
</div>
<div id="logo">
</div>
<div id="login_out">
</div>
</div>
<div class="space">
</div>
<div id="content">
</div>
<div class="space">
</div>
<div id="footer">
</div>
</div>
Any idea why? (the colors are there just to see how it looks, please just ignore them)
And the second question, similar problem. Inside "head" there are three small divs that I want to float to left. Two of them behave as I want, the first one isn't even showed on the website. Here's the css for those three bits:
#reg_welcome
{
background-color: royalblue;
float: left;
width: 100px;
height: 75px;
margin-right: 40px;
}
#logo
{
background-color: springgreen;
width: 300px;
height: 75px;
float: left;
}
#login_out
{
background-color: teal;
float: left;
width: 120px;
height: 75px;
margin-left: 40px;
}
<div id="container">
<div id="head">
<div id="reg_welcome">
</div>
<div id="logo">
</div>
<div id="login_out">
</div>
</div>
<div class="space">
</div>
<div id="content">
</div>
<div class="space">
</div>
<div id="footer">
</div>
</div>
The oddest thing is here it all seems to work perfectly, but when ran on localhost, I have the problems I mentioned. Any idea why it happens?
My div-overflow is not working.
LINK: jsfiddle
HTML:
<div class="modalDialog" id="chooseVariableDialog">
<h4>Choose Variables</h4>
<div class="" id="variablesContainer">
<div class="variablesDiv">
<div class="variablesType">Variables</div>
</div>
<div class="variablesDiv">
<div class="variablesType">Type</div>
</div>
<div class="variablesDiv">
<div class="variablesType">comp1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">extern1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">coord1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">id1</div>
</div>
</div>
</div>
CSS:
div.variablesDiv {
float: left;
width: 150px;
align-content: center;
}
div.modalDialog {
width: 600px;
height:auto;
overflow:auto;
background-color: #F0F0F0;
top: 10%;
}
div.names {
float:left;
width:100px;
padding-left: 35px;
}
h4 {
color:#66CCFF;
text-align:center;
}
div.variablesType {
color: #66CCFF;
float:left;
padding-left: 45px;
}
div.variablesDiv {
float: left;
width: 150px;
align-content: center;
}
div#variablesContainer {
width: auto;
height: auto;
position: relative;
float:left
}
The 6 divs (variables, type, comp1, extern1, coords1 and id1) should be in a line, but I don't know why the overflow does not work.
try this Demo
HTML
<div class="modalDialog" id="chooseVariableDialog">
<h4>Choose Variables</h4>
<div class="" id="variablesContainer">
<div class="variablesDivWraper">
<div class="variablesDiv">
<div class="variablesType">Variables</div>
</div>
<div class="variablesDiv">
<div class="variablesType">Type</div>
</div>
<div class="variablesDiv">
<div class="variablesType">comp1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">extern1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">coord1</div>
</div>
<div class="variablesDiv">
<div class="variablesType">id1</div>
</div>
</div>
</div>
</div>
Jquery
var variablesDivCount = $('.variablesDiv').length;
$('.variablesDivWraper').width(variablesDivCount * 150);
The problem is with
div#variablesContainer {
width: auto;
height: auto;
position: relative;
float:left
}
By making width: auto you're telling the container to adapt to the width of its parent element, not its content.
Try width: 900px; and it will work.
Few css change will make the div scrollable.
1) Remove float:left and add display: table-cell property to div.variablesDiv. You have declared css for variablesDiv in two places. Remove any on of the declaration and use the following css for div.variablesDiv
div.variablesDiv {
/*float: left;*/
width: 150px;
align-content: center;
display: table-cell;
}
2) Modify overflow property of div.modalDialog to overflow-x: scroll
div.modalDialog {
width: 600px;
height:auto;
overflow-x:scroll;
background-color: #F0F0F0;
top: 10%;
}