When specifying column-count of 2:
.parent {
-webkit-column-count: 2;
overflow-y: scroll;
max-width: 100%;
height: 400px;
}
.child {
display: block;
}
I get way more than 2 columns if there is a height specified. It grows horizontally instead of vertically, overflowing the max-width rather than overflowing the height.
JSFiddle example: http://jsfiddle.net/brentonstrine/6bk5jb3L/2/
I would like to have it scroll vertically rather than horizontally, and stay limited to the column-count which I have specified.
I can't add extra markup, I have to work with the existing elements.
You can also achieve this with flexbox. Remember to use the proper css prefixes.
My solution is here on JSFiddle:http://jsfiddle.net/6bk5jb3L/41/
I also remove the -webkit-column-count style.
Below will get rid of the scroll bar for you:
.parent::-webkit-scrollbar {
display: none;
}
EDIT
Here is an example of the fix that keeps the -webkit-column-count style: http://jsfiddle.net/6bk5jb3L/47/
.parent {
overflow-x: auto;
width: 100%;
height: 400px;
border: solid 1px red;
box-sizing: border-box;
display:flex;
flex-direction: row;
flex-wrap: wrap;
column-count: 2;
}
.parent::-webkit-scrollbar {
display: none;
}
.child {
display: block;
width: 50%;
border: solid 1px blue;
box-sizing: border-box;
height: 40px;
}
Since you cannot change the markup, add this JQuery that will wrap your parent <div> with another <div> like this: http://jsfiddle.net/6bk5jb3L/12/
JQuery
$( ".parent" ).wrap( "<div class='parentToTheParent'></div>" );
CSS
.parentToTheParent {
overflow-y: scroll;
max-width: 100%;
height: 400px;
border: solid 1px red;
}
.parent{ width: 100%; -webkit-column-count: 2;}
.child{
border: solid 1px blue;
}
PS the parent to the parent was just for fun, don't over think it lol
Related
How to show the scrolling of Bootstrap table using a flex container?
https://getbootstrap.com/docs/4.4/content/tables/#responsive-tables
I need DIVS of JSFiddle example. If I remove display:flex of .flex_container and I resize the browser It works, to appears scrolling in low resolutions, but I can't change the structure, I need that DIV.
Any idea? (JSFiddle example)
Thank you.
https://jsfiddle.net/fekula/49by5oL3/4/
<style>
.flex_container {
display: flex;
position: relative;
margin: 0 10px;
background: Red;
}
#main {
padding: 10px;
color: #000;
background: #fff;
flex-grow: 1;
position: relative;
}
</style>
Add max-width: 100% to #main to get a scrollbar for your table:
#main {
padding: 10px;
color: #000;
background:
#fff;
flex-grow: 1;
position: relative;
// add this:
max-width: 100%;
}
https://jsfiddle.net/m0aonz2k/
I have a fixed width and height container that consists of arbitrary height elements that need to be stacked vertically. How can I hide any elements that do not fit? overflow: hidden could still show the part of an element that doesn’t overflow.
.container {
border: 1px solid #eee;
height: 200px;
overflow: hidden;
}
.box {
background-color: #ccc;
line-height: 54px;
margin: 20px;
text-align: center;
width: 60px;
}
.incorrect {
background-color: #fa9;
}
<div class="container">
<div class="box">show</div>
<div class="box">show</div>
<div class="box incorrect">hide</div>
</div>
Assuming that your child elements have the same width as the container, this can be achieved by leveraging the containing box created from the flex property.
The trick is to use flex-flow: column wrap; in conjunction with overflow: hidden; on the container. The former dictates that the content is stacked vertically and that anything that does not fit should be wrapped into a second column, outside of the content box of the container. The latter dictates that this second column (and any subsequent columns) should be hidden.
.container {
width: 300px;
height: 200px;
display: flex;
flex-flow: column wrap;
overflow: hidden;
}
.box {
width: 300px;
height: 75px;
}
.box:nth-child(1) {
background: red;
}
.box:nth-child(2) {
background: green;
}
.box:nth-child(3) {
background: blue;
}
<div class='container'>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
An easy way of doing this would be to use CSS columns instead of flex.
Just use a column-width equal to the width of the container. Apply break-inside: avoid on child divs. And there you go.
It resolves all of the asks:
[..]have a fixed width and height container that consists of arbitrary
height elements that need to be stacked vertically. How can I hide any
elements that do not fit?
You can notice that the red div (the last one) is hidden completely.
Example Snippet:
* { box-sizing: border-box; margin: 0; padding: 0; }
.container {
border: 1px solid #999;
height: 200px; width: 300px;
overflow: hidden;
column-width: 300px;
}
.box {
padding: 8px; text-align: center; color: #fff;
width: 250px; height: 80px;
break-inside: avoid
}
.box:nth-child(1) { background: #3b3; }
.box:nth-child(2) { background: #33b; width: 200px; height: 75px; }
.box:nth-child(3) { background: #b33; }
<div class="container">
<div class="box">show</div>
<div class="box">show</div>
<div class="box">hide</div>
</div>
Note: As of now, Firefox is still a problem area with CSS columns. The break-inside, although documented on MDN, is buggy in Firefox. The bug is still open: https://bugzilla.mozilla.org/show_bug.cgi?id=549114.
I have three divs:
.container (display:table),
.left, .right (display:table-cell);
For .left I used 80%, the .right is 20%. In the left div I have many items with percentage width. If I add about 5 items everything work, I can resize the browser window, but when I have about 25 items the right side disappear.
I didn't added the html, because it's too long. Please check the result on JSFiddle. How can I solve this issue?
.container {
border: 1px solid gray;
display: table;
width: 100%;
}
.left {
display: table-cell;
width: 80%;
background: yellow;
}
.right {
display: table-cell;
width: 20%;
background: red;
}
.items {
width: 40%;
height: 100px;
background: blue;
display: inline-block;
margin-right: 15px;
}
.scroll {
width: 100%;
overflow-x: scroll;
white-space: nowrap;
}
If you change the table-layout property to fixed for the .container element, it resolves the issue:
Updated Example
.container {
border: 1px solid gray;
display: table;
table-layout: fixed;
width: 100%;
}
I am creating a site in bootstrap, and I want to know how to vertically center two child divs inside of a parent div. I know this is probably pretty simple, but I have tried everything and it will not work.
(http://codepen.io/cjhill02/pen/VLPERd)
try margin:auto
* {
border: 1px solid #ddd;
}
section {
padding: 100px 0;
margin: auto
}
.col-md-6{
margin: auto
}
for IE9 and IE10 put display:table to parent div and set attribute vallign="middle";display:table-cell to child element
vallign is a basic property supperted by old browsers as well as some new browsers
You can always do it with display: flex;
JS Fiddle
.container {
display:flex;
width:100%;
align-items: center;
justify-content: center;
height: 400px;
border: 4px solid black;
}
.container div {
display:flex;
align-items: center;
justify-content: center;
}
.container > div {
width: 40%;
background-color: red;
height: 221.5433px;
}
.container > div + div {
width: 40%;
background-color: brown;
height: 278.8431px;
}
<div class="container">
<div>centered</div>
<div>centered</div>
</div>
Do we know the height of the parent div? if so you can do like here
.row {
justify-content: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Please see here for result.
I'm working on a page that can hold very big content. It could easily grow to (and over) 10.000px in width. I simply want my page to stretch along.
This should be very simple, and I can fix it with display: table-cell, but it doesn't 'smell' as the right answer. It feels like a hack. I think I'm missing something crucial.
Fiddle
CSS:
#container { white-space: nowrap; padding: 50px; background-color: green; }
#container > div { display: inline-block; width: 200px; height: 200px; }
#container > div:nth-child(2n+1) { background-color: red; }
body { background-color: #ccc; }
HTML:
<div id="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
Why isn't the container div stretching to its content?
BODY is correctly stretched, so how do I force my container div to take the width of its parent or children?
try something like this
#container {
background-color: #008000;
display: table;
padding: 50px;
white-space: nowrap;
}
EDITED
#container {
background-color: #008000;
display: inline-block;
padding: 50px;
white-space: nowrap;
}
DEMO
Add overflow-x: scroll; to #container. Is that what you want?
Edit: changed to overflow-x :)
CSS
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
overflow-x: scroll;
}
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
display:table;
}
#container > div {
display: inline-block;
width: 200px;
height: 200px;
display:table-cell;
}
add the line overflow-x: scroll; to your container-css
here is a jsfiddle as well