I'm trying to create a collapsible divs (arranged in a column) which takes always the same height when open.
For example, if one div is open, it takes 100% of the height. If two are open, each takes 50% etc.
I set flex-grow: 1 on each div, but the one with bigger content is always higher then others. I tried also to set
fles-basis: 0, but then they do not open at all.
Here is the link to my minimal example: https://codesandbox.io/s/nifty-meadow-hyr31
In your Collapsible.module.css add height=100vh to open style:
.open {
overflow: auto;
height: 100vh;
}
To explain why the solution above works, one vh is equal to 1% of the viewport, the browser will always compute the values in pixels, to see a simple example :
one = document.querySelector('.one');
two = document.querySelector('.two');
one.innerText = one.clientHeight;
two.innerText = two.clientHeight;
body {
height: 100vh;
display: flex;
flex-direction: column;
}
div {
height: 100vh;
}
.one {
background-color: chocolate;
}
.two {
background-color: cyan;
}
.three {
background-color: darkgray;
}
<div class="one">one</div>
<div class="two">two</div>
If you add a third div with a class 'three' the browser will assign each the third of the available height of the viewport. 100vh is not an absolute measure, the only absolute values are the one you put in pixels (although even that can change sometimes if your elements are not considered responsive enough by the browser).
Related
I have a simple 3 column layout with a left sidebar, content area, and right sidebar. I am using flexbox to handle widths. I would like to make it so that when a user drags the right border of the left sidebar, the div can be resized. I would prefer a css solution if it makes sense but am open to javascript or jquery. Whichever approach is easiest for me to understand : )
Here is a possible solution using the css resize property (click Run code snippet to see the result).
Notes:
The resize handler is in the bottom right corner of the left sidebar
The resize property is not yet fully supported by all browser (~74% see caniuse)
The styles for the resize handler are still limited (see this question)
.container {
height: 500px;
display: flex;
}
.left-sidebar {
display: flex;
flex-direction: row;
background-color: #364F6B;
color: #fff;
/* This is for resizing */
overflow: scroll;
resize: horizontal;
}
.center-aria {
background-color: #3FC1C9;
flex-grow: 2;
}
.right-sidebar {
background-color: #FC5185;
}
.left-sidebar, .right-sidebar, .center-aria {
padding: 8px;
}
<div class="container">
<div class="left-sidebar">
Left Sidebar - Resize me
</div>
<div class="center-aria">Center Aria</div>
<div class="right-sidebar">Right Sidebar</div>
</div>
So this one is a little bit hard to explain, but I'll try it:
I've got a div with the class .boxes. It's the wrapper of some looped elements. The looped elements have the class .box. Within this element, there are two more elements. One is the header with the class .box-header and one is the content with the class .box-content. I can open and close this elements with a click on it, so if it's closed, I just see the .box-header and if it's opened, I can see also the .box-content.
Here is a screenshot, which shows you how this looks like (grey container .boxes with the elements .box within in different states closed/opened):
I've got such lists in different components, so more than one time. The structure is mostly the same. So a example template of this looks like this:
<!--wrapper boxes-->
<div class="boxes">
<!--looped element box-->
<div class="box boxFor{{::box.id}}" ng-repeat="box in boxes" ng-class="{fill-container: boxes.length == 1}">
<!--box header-->
<div class="box-header" ng-click="box.open = !box.open">
{{::box.name}}
</div>
<!--box content-->
<div class="box-content" ng-if="box.open">
<!--some content-->
</div>
</div>
</div>
Here is a example style of the classes:
.boxes {
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: auto;
.box {
display: flex;
flex-direction: column;
flex: 0 0 auto;
margin-bottom: 5px;
}
.box-header {
display: flex;
flex-direction: row;
justify-content: flex-start;
min-height: 30px;
line-height: 20px;
font-size: 16px;
padding: 5px;
}
.box-content{
padding: 5px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
margin-top: 5px;
}
.fill-container {
flex: 1 1 auto;
}
}
Now one requirement was, that everytime I open a box, it should take 50% of the height from his wrapper. So .box should have a height: 50%; of .boxes. This mean, I can see in maximum 2 opened boxes in the same time. When I open a third etc., it also should take the same height of 50% from .boxes, but I have to scroll to see it. If I just have one box, it should fill the whole container when I open it, this is solved with the ng-class="{fill-container: boxes.length == 1}" and works fine. I also implemented a function, which calculates and sets the 50% correctly to .box and it's also correct on the screen like in my screenshots. I did it like this:
In the ng-click of my .box-header, I call a function named setBoxHeight() in my controller, which calculates and sets me the correct height:
<div class="box-header" ng-click="box.open = !box.open; ctrl.setBoxHeight()">
{{::box.name}}
</div>
The function looks like this:
setBoxHeight() {
if (this.boxes.length > 1) {
let boxHeaderHeight = $('.box-header').outerHeight();
let halfHeight = Math.round($('.boxes').outerHeight() / 2);
this.boxes.forEach((box: any) => {
let element = $('.boxFor' + box.id);
if (box.open) {
element.height(halfHeight);
} else {
element.height(boxHeaderHeight);
}
});
}
}
If you compare my template and this function, it should be clear what happens. This works also fine. The problem is, that I have to implement it in every list I have on different controllers for different components. I would like to unify it and run it centrally for all lists. It should be a clean solution. I tried to build a external component and pass throught the boxes and their class names with some bindings and call once the function, something like this:
<my-component items="ctrl.boxes" header-class="'.box-header'" wrapper-class="'.boxes'"></my-component>
I'm pretty sure, there is a cleaner way to do this. I hope my question is clear enough. Any ideas?
You could go for an all-CSS solution, and use the flex-basis property (see documentation). Basically, it sets the default size of flexible children; so you could set this to 50%, so each box would take half the height of boxes (since your flex-direction is set to column).
There is of course some implementation to do to adapt this to your project, but it's worth a shot (and perhaps cleaner?).
Here is a codepen to show you the trick.
EDIT: As #MrBuggy pointed out, this solution won't work in their case, since the boxes container doesn't have a fixed height.
I am working on a nested flexbox layout which should work as follows:
The outermost level (ul#main) is a horizontal list that must expand to the right when more items are added to it. If it grows too big, there should be a horizontal scroll bar.
#main {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
/* ...and more... */
}
Each item of this list (ul#main > li) has a header (ul#main > li > h2) and an inner list (ul#main > li > ul.tasks). This inner list is vertical and should wrap into columns when needed. When wrapping into more columns, its width should increase to make room for more items. This width increase should apply also to the containing item of the outer list.
.tasks {
flex-direction: column;
flex-wrap: wrap;
/* ...and more... */
}
My problem is that the inner lists don't wrap when the height of the window gets too small. I have tried lots of tampering with all the flex properties, trying to follow the guidelines at CSS-Tricks meticulously, but no luck.
This JSFiddle shows what I have so far.
Expected result (what I want):
Actual result (what I get):
Older result (what I got in 2015):
UPDATE
After some investigation, this is beginning to look like a bigger issue. All major browsers behave the same way, and it has nothing to do with my flexbox design being nested. Even simpler flexbox column layouts refuse to increase the list's width when the items wrap.
This other JSFiddle clearly demonstrates the problem. In current versions of Chrome, Firefox and IE11, all items wrap correctly; the list's height increases in row mode, but its width does not increase in column mode. Also, there is no immediate reflow of elements at all when changing the height of a column mode, but there is in row mode.
However, the official specs (look specifically at example 5) seem to indicate that what I want to do should be possible.
Can someone come up with a workaround to this problem?
UPDATE 2
After a lot of experimenting using JavaScript to update the height and width of various elements during resize events, I have come to the conclusion that it is too complex and too much trouble to try to solve it that way. Also, adding JavaScript definitely breaks the flexbox model, which should be kept as clean as possible.
For now, I'm falling back to overflow-y: auto instead of flex-wrap: wrap so that the inner container scrolls vertically when needed. It is not pretty, but it is one way forward that at least does not break useability too much.
The Problem
This looks like a fundamental deficiency in flex layout.
A flex container in column-direction will not expand to accommodate additional columns. (This is not a problem in flex-direction: row.)
This question has been asked many times (see list below), with no clean answers in CSS.
It's hard to pin this as a bug because the problem occurs across all major browsers. But it does raise the question:
How is it possible that all major browsers got the flex container to
expand on wrap in row-direction but not in column-direction?
You would think at least one of them would get it right. I can only speculate on the reason. Maybe it was a technically difficult implementation and was shelved for this iteration.
UPDATE: The issue appears to be resolved in Edge v16.
Illustration of the Problem
The OP created a useful demo illustrating the problem. I'm copying it here: http://jsfiddle.net/nwccdwLw/1/
Workaround Options
Hacky solutions from the Stack Overflow community:
"It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution."
"It's curious that most browsers haven't implemented column flex containers correctly, but the support for writing modes is reasonably good. Therefore, you can use a row flex container with a vertical writing mode."
More Analysis
Chromium Bug Report
Mark Amery's answer
Other Posts Describing the Same Problem
Flex box container width doesn't grow
How can I make a display:flex container expand horizontally with its wrapped contents?
Flex-flow: column wrap. How to set container's width equal to content?
Flexbox flex-flow column wrap bugs in chrome?
How do I use "flex-flow: column wrap"?
Flex container doesn't expand when contents wrap in a column
flex-flow: column wrap, in a flex box causing overflow of parent container
Html flexbox container does not expand over wrapped children
Flexbox container and overflowing flex children?
How can I make a flexbox container that stretches to fit wrapped items?
Flex container calculating one column, when there are multiple columns
Make container full width with flex
Flexbox container resize possible?
Flex-Wrap Inside Flex-Grow
Flexbox grow to contain
Expand flexbox element to its contents?
flexbox column stretch to fit content
https://stackoverflow.com/q/48406237/3597276
flex-flow: column wrap doesn't stretch the parent element's width
Why doesn't my <ul> expand width to cover all the <li>?
https://stackoverflow.com/q/55709208/3597276
Flexbox wrap not increasing the width of parent?
Absolute Flex container not changing to the correct width with defined max-height
Late to the party, but was still running into this issue YEARS later. Ended up finding a solution using grid. On the container you can use
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);
I have an example on CodePen that toggles between the flexbox issue and the grid fix: https://codepen.io/MandeeD/pen/JVLdLd
CSS-only workaround
Nearly 6 years after this question was asked, this flexbox bug still exists, so here's a CSS-only flex-direction: column workaround for anyone else that ends up here:
body {
background-color: grey;
}
button {
background-color: white;
border: none;
border-radius: 4px;
width: 80px;
height: 40px;
margin: 4px;
}
/* WORKAROUND FOR flex-direction: column WITH WRAP IS BELOW */
.wrapped-columns {
flex-direction: row;
flex-wrap: wrap;
writing-mode: vertical-lr;
text-orientation: upright;
}
/* Ensures content is rendered correctly in Firefox */
.wrapped-columns * {
writing-mode: horizontal-tb;
}
<div class="wrapped-columns">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
<button>Button 6</button>
<button>Button 7</button>
<button>Button 8</button>
<button>Button 9</button>
<button>Button 10</button>
<button>Button 11</button>
<button>Button 12</button>
<button>Button 13</button>
<button>Button 14</button>
</div>
This workaround gives the same outcome as flex-direction: column and works with both flex-wrap: wrap and wrap-reverse.
I just found a really awesome PURE CSS workaround here.
https://jsfiddle.net/gcob492x/3/
The tricky: set writing-mode: vertical-lr in the list div then writing-mode: horizontal-tb in the list item. I had to tweak the styles in the JSFiddle (remove a lot of the alignment styles, which aren't necessary for the solution).
Note: the comment says it only works in Chromium-based browsers, and not Firefox. I've only personally tested in Chrome. It's possible either there's a way to modify this to make it work in other browsers or there have been updates to said browsers that make this work.
Big shoutout to this comment: When flexbox items wrap in column mode, container does not grow its width. Digging through that issue thread led me to https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39 which led me to this JSFiddle.
It is unfortunate that so many major browsers suffer from this bug after many years. Consider a Javascript workaround. Whenever the browser window resizes, or content is added to the element, execute this code to get it to resize to the proper width. You can define a directive in your framework to do it for you.
element.style.flexBasis = "auto";
element.style.flexBasis = `${element.scrollWidth}px`;
Since no solution or proper workaround was suggested yet, I managed to obtain the requested behavior with a little different approach. Instead of separating the layout into 3 different divs, I'm adding all the items into 1 div and creating the separation with some more divs in between.
The proposed solution is hard coded, assuming we have 3 sections, but can be extended to a generic one. The main idea is to explain how we can achieve this layout.
Adding all the items into 1 container div that uses flex to wrap the items
The first item of each "inner container" (I'll call it a section) will have a class, which helps us to do some manipulations that create the separation and styling of each section.
Using :before on each first item, we can locate the title of each section.
Using space creates the gap between the sections
Since the space won't cover the full height of the section I'm also adding :after to the sections so positioning it with absolute position and white background.
To style the background color of each section I'm adding another div inside the first item of each section. I will be position with absolute as well and will have z-index: -1.
To get the correct width of each background, I'm using JS, setting the correct width, and also adding a listener to resize.
function calcWidth() {
var size = $(document).width();
var end = $(".end").offset().left;
var todoWidth = $(".doing-first").offset().left;
$(".bg-todo").css("width", todoWidth);
var doingWidth = $(".done-first").offset().left - todoWidth;
$(".bg-doing").css("width", doingWidth);
var doneWidth = $(".end").offset().left - $(".done-first").offset().left;
$(".bg-done").css("width", doneWidth + 20);
}
calcWidth();
$(window).resize(function() {
calcWidth();
});
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 120px;
align-content: flex-start;
padding-top: 30px;
overflow-x: auto;
overflow-y: hidden;
}
.item {
width: 200px;
background-color: #e5e5e5;
border-radius: 5px;
height: 20px;
margin: 5px;
position: relative;
box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
padding: 5px;
}
.space {
height: 150px;
width: 10px;
background-color: #fff;
margin: 10px;
}
.todo-first:before {
position: absolute;
top: -30px;
height: 30px;
content: "To Do (2)";
font-weight: bold;
}
.doing-first:before {
position: absolute;
top: -30px;
height: 30px;
content: "Doing (5)";
font-weight: bold;
}
.doing-first:after,
.done-first:after {
position: absolute;
top: -35px;
left: -25px;
width: 10px;
height: 180px;
z-index: 10;
background-color: #fff;
content: "";
}
.done-first:before {
position: absolute;
top: -30px;
height: 30px;
content: "Done (3)";
font-weight: bold;
}
.bg-todo {
position: absolute;
background-color: #FFEFD3;
width: 100vw;
height: 150px;
top: -30px;
left: -10px;
z-index: -1;
}
.bg-doing {
position: absolute;
background-color: #EFDCFF;
width: 100vw;
height: 150px;
top: -30px;
left: -15px;
z-index: -1;
}
.bg-done {
position: absolute;
background-color: #DCFFEE;
width: 10vw;
height: 150px;
top: -30px;
left: -15px;
z-index: -1;
}
.end {
height: 150px;
width: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item todo-first">
<div class="bg-todo"></div>
Drink coffee
</div>
<div class="item">Go to work</div>
<div class="space"></div>
<div class="item doing-first">
<div class="bg-doing"></div>
1
</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="space"></div>
<div class="item done-first">
<div class="bg-done"></div>
1
</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="end"></div>
</div>
I solved my issue in this manner I hope it helps someone else that stumbles on thid :
_ensureWidth(parentElement) {
let totalRealWidth = 0;
let parentElementBoundingRect = parentElement.getBoundingClientRect()
let lowestLeft = parentElementBoundingRect.x;
let highestRight = parentElementBoundingRect.width;
for (let i = 0; i < parentElement.children.length; i++) {
let { x, width } = parentElement.children[i].getBoundingClientRect();
if (x < lowestLeft) {
lowestLeft = x;
}
if (x + width > highestRight) {
highestRight = x + width;
}
}
totalRealWidth = highestRight - lowestLeft;
parentElement.style.width = `${totalRealWidth}px`;
}
Workaround :
using javascript its not hard to set the wrapper's width manually after elements have loaded on the screen. The width would always be the last child element's right hand point.
In react i have it updated on the layout changes based on any children being added to the flex wrapper , but this could be called at any point you add or remove children to the wrapper .
let r = refWrapper.current.lastElementChild.getBoundingClientRect()
refWrapper.current.style.width = (r.x+r.width )+'px'
`
where refWrapper is your your flex element
Possible JS solution..
var ul = $("ul.ul-to-fix");
if(ul.find("li").length>{max_possible_rows)){
if(!ul.hasClass("width-calculated")){
ul.width(ul.find("li").eq(0).width()*ul.css("columns"));
ul.addClass("width-calculated");
}
}
I've being trying to get a consistent horizontal scroll with flex-box.
http://codepen.io/sheriffderek/pen/NABzdQ
Things were going great, but I did that thing ~ where you forget to look at it in Safari and FireFox. Things aren't working great there. Normally, if something works in web-kit but not firefox, webkit is smoothing out something that isn't right / where as firefox follows the rules. So, it's not a bug or anything... but the flexy things aren't really expanding around their child images.
That being said, I can't figure out which part is the pivotal thing that needs to change.
I'm using flex-box for the header and 'content' area where the content area grows to fill the remaining space. So, a global column
Within the 'content' area, there is a list that is flex and row. In the list there are items with either text or an image. The images should be 100% height of the list, and then auto width.
I would have thought that I could set the images to 100% height and width auto (similar to how I do the opposite for small-screens) - but the affect is not the same.
img {
display: block;
height: 100%;
width: auto;
}
to deal with this, I use JS to find the height of the 'content' area and set the images to that height.
http://s.codepen.io/sheriffderek/debug/NABzdQ (version with no editor for testing / on iPad etc.)
Works great in Chrome.
So... Does anyone have any advice? My real project is small-screen first, so more complex - but this is a clear example of where things go awry.
Styles
ul
list-style: none
margin: 0
padding: 0
body
display: flex
flex-direction: column
height: 100vh // ?
.header
//
.section // content
display: flex
flex-grow: 1
.item-list
display: flex
flex-direction: row
flex-grow: 1
max-width: 100%
overflow: auto
.item
display: flex
flex-grow: 1
a //
display: block
display: flex
.image-w
width: auto // should stretch to fit the child / image
max-height: 100%
overflow: hidden //?
img
display: block
width: auto
// height to be set by JS
.text-w
width: 400px
padding: 1rem
Scripts
var setUp = function() {
$('.item').each( function() {
var $this = $(this);
// var $thisFigure = $this.find('.image-w');
var $thisImage = $this.find('img');
var thisHeight = $this.outerHeight();
$thisImage.css({
height: thisHeight
});
});
};
$(window).resize( setUp ).trigger('resize');
I am trying to create a carousel, where clicking on any element will slide it leftwards, simultaneously sliding the right element into viewport. For that, I need to have the divs stacked side by side. I am trying it out as a float based layout (see Fiddle ).
Problem is that here clicking the red colored div slides it leftward alright, but not the green element leftwards. This is probably due to the fact that they are actually lying below another, as visible when the overflow: hidden is removed from #cont's style. How elese to stack them side by side so that sliding one leftward automatically slides the next one leftwards as well? (Creating the to-be-next element on the fly while clicking and animating it into viewport is a no-no, the element should be present in the DOM!)
I'd suggest you use a plugin, as there is more to this than you may realize. There are many plugins out there for this, here's a list to get you started: http://www.tripwiremagazine.com/2012/12/jquery-carousel.html
I modified your Javascript, HTML, and CSS to get you pointed in the right direction:
http://jsfiddle.net/nf5Dh/2/
You need a container contContent, positioned absolutely, and that container gets moved within the container div. You just float the elements in contContent to get them next to each other.
HTML:
<div id='cont'>
<div id="contContent">
<div id='i1'></div>
<div id='i2'></div>
<div id='i3'></div>
</div>
</div>
CSS:
#cont {
width: 50px;
padding-top: 10px;
background: blue;
height: 50px;
overflow: hidden;
position: relative;
}
#contContent {
height: 50px;
width: 150px;
position: absolute;
top: 0;
left: 0;
}
#contContent > div {
float: left;
display: inline-block;
height: 50px;
width: 50px;
}
#i1 { background: red; }
#i2 { background: green; }
#i3 { background: yellow; }
And the JS:
$("#contContent > div").click(function(){
$("#contContent").animate({left: "-=50px"},1000);
});
You'd probably be better off using an ul instead of all divs, this is at least more semantically correct, though not technically necessary.
<div id="carousel">
<ul id="carouselContent">
<li id="slide1"></li>
<li id="slide2"></li>
<li id="slide3"></li>
</ul>
</div>
This:
#cont {
white-space:nowrap;
overflow: hidden;
}
.pane { // or whatever the slide divs are called. get rid of the float.
float: none;
display: inline-block;
*zoom:1;
*display:inline;
}
You can use that carousel where you can generate javascript for the carousel http://caroufredsel.dev7studios.com/configuration-robot.php
I've used http://sorgalla.com/jcarousel/ for things like this in the past, that's based on postion: relative and left/right offsets. Probably easier than messing with floats.
You can try using a list item instead, and display them inline.