Using flex-basis for column widths. Why does COLUMN02 extend beyond the browser's edge? What am I doing wrong? Unfortunately it does not show in the code snippets here but it does in the the fiddle. TIA!
http://jsfiddle.net/dragontheory/37b8vkoa/1/
html,
body {
min-height: 100vh;
/* force footer to bottom of browser */
height: 100%;
/*for IE11*/
}
.page-header,
.page-footer {
padding: 20px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.column01 {
-webkit-box-flex: 0 0 200px;
-ms-flex: 0 0 200px;
flex: 0 0 200px;
background-color: rgba(0, 0, 0, 0.1);
}
.column02 {
-webkit-box-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
background-color: rgba(0, 0, 0, 0.2);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container-fluid d-flex flex-column px-0">
<div class="page-footer p-2">HEADER</div>
<main class="row flex-fill no-gutters flex-nowrap">
<div class="col column01 d-flex flex-column">COLUMN01</div>
<div class="col column02 d-flex flex-column">COLUMN02</div>
</main>
<div class="page-footer p-2">FOOTER</div>
</body>
It's your custom CSS that's causing it:
.column02 {
flex: 0 0 auto;
}
.col {
width: 100%;
}
... which translates into:
flex-grow: 0 (do not allow flex to grow this element)
flex-shrink: 0 (do not allow flex to shrink this element)
flex-basis: auto (get flex-basis from width - which is set to 100% by .col)
Which blocks the width of that column to the width of its parent and does not allow it to shrink down, regardless of the fact the sum of the children's widths exceeds the width of the parent.
Setting any of the following on .column02 will fix it:
flex-shrink: 1
width: auto; flex-grow: 1;
flex-basis: 0; flex-grow: 1;
flex: 1;
Or simply remove flex: 0 0 auto; (because .col already sets flex-basis: 0; flex-grow: 1; - third case above).
Addition:
For your resizable panels to work, I recommend placing the entire required markup inside one column:
$(function() {
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
})
html,
body {
min-height: 100vh;
height: 100%;
}
.page-header,
.page-footer {
padding: 20px 10px;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-left {
flex: 0 0 auto;
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 210px;
white-space: nowrap;
background: #838383;
color: white;
}
.splitter {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 120px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #eee;
}
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
xtouch-action: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<body class="container-fluid d-flex flex-column px-0">
<div class="page-footer p-2">HEADER</div>
<main class="row flex-fill no-gutters flex-nowrap">
<div class="col panel-container">
<div class="panel-left">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right">
right panel
</div>
</div>
</main>
<div class="page-footer p-2">FOOTER</div>
</body>
Related
Consider the following:
* {padding: 0; margin: 0; }
body {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
header {
flex: 0 0 50px;
background-color: lightgray;
}
div#wrapper {
flex: 1 0 0px;
display: flex;
flex-direction: row;
}
aside {
background-color: darkgray;
flex: 0 0 50px;
}
main {
display: block;
flex: 1 1 0px;
background-color: aliceblue;
}
div#content {
width: 60px;
height: 2000px;
margin: 10px;
background-color: red;
}
div#content-wrap {
width: 100%;
height: 100%;
}
div#content-container {
height: 100%;
overflow-y: scroll;
}
<html>
<head></head>
<body>
<header></header>
<div id="wrapper">
<aside></aside>
<main>
<div id="content-wrap">
<div id="content-container">
<div id="content"></div>
</div>
</div>
</main>
</div>
</body>
</html>
In the snippet above, the <body> fills all the available space, it's consisted of a <header> which takes an arbitrary height and a <div id="wrapper"> that takes the rest of available height. The aforementioned "#wrapper" has a "sidebar" that has an arbitrary width and a "<main>" section to take the rest of the width. I want only the "main" section to be scrollable, but applying a long enough "#content" causes the "body" to get the scrollbar, instead! (while I've enforced the heights to be 100%) So, how to fix this?
here only remove same height according to <header></header> from <div id="wrapper"> bcz of normaly it will take 100% height #wrapper so only add height: calc(100% - 50px);
div#wrapper {
flex: 1 0 0px;
display: flex;
flex-direction: row;
height: calc(100% - 50px);
}
and it will be working like below ss
I'd like to place divs equally spaced on multiple rows. I've tried setting margins or justify-content but none of them worked so far. I want the course-lists in each row to be equally spaced but the space between the lists depends on the length of the name of the courses when I tried setting margins. I'm new to CSS so I'm sorry if the question or my codes are confusing.
HTML
<div className="course-section">
<div>
<h2 id="course-tag">Coursework</h2>
</div>
<div className="course-box">
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Data Structures</div>
<div className="course-bullet"></div>
<div className="course-list">Computer Architecture</div>
</div>
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Numerical Analysis</div>
<div className="course-bullet"></div>
<div className="course-list">Numerical Methods</div>
</div>
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Discrete Structures</div>
<div className="course-bullet"></div>
<div className="course-list">Intro to Computer Science</div>
</div>
<div className="course-list-row">
<div className="course-bullet"></div>
<div className="course-list">Applied Linear Algebra</div>
<div className="course-bullet"></div>
<div className="course-list">Physics Courses</div>
</div>
</div>
</div>
CSS
#mixin bullet {
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
#mixin resume-box {
background-color: white;
height: 350px;
width: 700px;
margin: auto;
overflow: hidden;
-webkit-box-shadow: 0 0 15px 3px #b0abaa;
-moz-box-shadow: 0 0 15px 3px #b0abaa;
box-shadow: 0 0 15px 3px #b0abaa;
}
.course-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
#course-tag {
margin-bottom: 40px;
margin-right: 530px;
font-weight: bold;
font-size: 30px;
}
.course-box {
#include resume-box;
margin-bottom: 80px;
padding: 40px 50px 40px 50px;
}
.course-bullet {
#include bullet;
}
.course-list {
display: inline-block;
margin-left: 10px;
font-size: 20px;
}
.course-list-row {
margin-bottom: 20px;
}
}
It's what I want.
Well I think it can be simplyfied like this:
HTML:
<div class="course-section">
<div>
<h2 id="course-tag">Coursework</h2>
</div>
<div class="course-box">
<div class="course-list">Data Structures</div>
<div class="course-list">Computer Architecture</div>
<div class="course-list">Numerical Analysis</div>
<div class="course-list">Numerical Methods</div>
<div class="course-list">Applied Linear Algebra and lorem ipsum dolor sit amet</div>
<div class="course-list">Discrete Structures</div>
<div class="course-list">Intro to Computer Science</div>
<div class="course-list">Physics Courses</div>
</div>
</div>
scss:
#mixin bullet {
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
#mixin resume-box {
background-color: white;
height: 350px;
width: 700px;
margin: auto;
overflow: hidden;
box-shadow: 0 0 15px 3px #b0abaa;
}
* {
box-sizing: border-box;
}
.course-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
#course-tag {
margin-bottom: 40px;
margin-right: 530px;
font-weight: bold;
font-size: 30px;
}
.course-box {
#include resume-box;
display: flex;
flex-wrap: wrap;
padding: 40px 50px 40px 50px;
.course-list {
flex: 0 0 50%;
position: relative;
font-size: 20px;
padding-left: 35px;
&:before {
content: '';
position: absolute;
left: 10px;
top: 3px;
#include bullet;
}
}
}
}
The important things here are:
* {
box-sizing: border-box;
}
Flex does not really need this, but i usually use this box-sizing so margins and paddings won't get sum to dom elements total height and/or width. I find border-box to be more precise.
.course-box {
display: flex;
flex-wrap: wrap;
}
The container is set to flex so we can use the flex property of its child elements to have them aligned and distributed. flex-wrap: wrap basically does what it says, force content inside a flex container to wrap when width is reached. (try to put it as nowrap in the snippet and see what happens)
.course-list {
flex: 0 0 50%;
}
Finally, we set the flex property of the list elements to 0 0 50%, this basically translates into 0 (this element can't be shrinked) 0 (this element can't be expanded) 50% (width of the element). So if you would like to have 3 elements per row it would be 0 0 33% and so.
You could even make it responsive. For example:
.course-list {
flex: 0 0 50%;
#media only screen and (max-width: 767px) {
flex: 0 0 100%;
}
}
this would result into two column rows in desktop and one column rows in mobile.
Also, avoid use a div to fake a bullet, better use the :after or :before pseudo elements as the snippet below, it will result in much cleaner html.
Here is a snippet:
* {
box-sizing: border-box;
}
.course-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.course-section #course-tag {
margin-bottom: 40px;
margin-right: 530px;
font-weight: bold;
font-size: 30px;
}
.course-section .course-box {
background-color: white;
height: 350px;
width: 700px;
margin: auto;
overflow: hidden;
box-shadow: 0 0 15px 3px #b0abaa;
display: flex;
flex-wrap: wrap;
padding: 40px 50px 40px 50px;
}
.course-section .course-box .course-list {
flex: 0 0 50%;
position: relative;
font-size: 20px;
padding-left: 35px;
}
.course-section .course-box .course-list:before {
content: "";
position: absolute;
left: 10px;
top: 3px;
height: 15px;
width: 15px;
background-color: blue;
display: inline-block;
}
<div class="course-section">
<div>
<h2 id="course-tag">Coursework</h2>
</div>
<div class="course-box">
<div class="course-list">Data Structures</div>
<div class="course-list">Computer Architecture</div>
<div class="course-list">Numerical Analysis</div>
<div class="course-list">Numerical Methods</div>
<div class="course-list">Applied Linear Algebra and lorem ipsum dolor sit amet</div>
<div class="course-list">Discrete Structures</div>
<div class="course-list">Intro to Computer Science</div>
<div class="course-list">Physics Courses</div>
</div>
</div>
the visual view of the tile is the same as for all tile, but I would like to know which will be logically correct to set 100% of tile width using flexbox property. where the flex: none or flex: 0 0 100%, because as per the bootstrap4 grid system they used flex: 0 0 100%;
img {
border: 0;
vertical-align: middle;
height: 180px;
overflow: hidden;
position: relative;
display: block;
width: 100%;
}
.flex {
display: flex;
}
.flex div {
border: 1px solid;
max-width: 299px;
}
.auto {
flex: 0 0 auto;
}
.hund {
flex: 0 0 100%;
}
.none {
flex: none;
}
#media (min-width: 768px) {
.flex div {
flex: 0 0 33.3333333%;
max-width: 33.3333333%;
}
}
<div class="flex">
<div class="auto">
<img src="https://via.placeholder.com/340x230"> This is flex-basis auto
</div>
</div>
<div class="flex">
<div class="hund">
<img src="https://via.placeholder.com/340x230"> This is flex-basis hund
</div>
</div>
<div class="flex">
<div class="none">
<img src="https://via.placeholder.com/340x230"> This is flex-basis none
</div>
</div>
<div class="flex">
<div class="pointless"><img src="https://via.placeholder.com/340x230"> This is flex-basis pointless
</div>
</div>
I am trying to make a DIV fill its whole parent container with pure CSS. height:100% doesn't do it and flexbox or display:table on the parent also didn't help :(
In the attached code, we're talking about the innermost
div.CodeMirror
The problem occurs in the latest Safari on MacOS. In Chrome all is fine.
html, body, #root {
margin: 0;
padding: 0;
height: 100%;
}
.App {
display: flex;
flex-flow: column;
height: 100%;
}
div.editorContainer {
flex: 1 1 auto;
display: flex;
margin-bottom: 1em;
}
div.ReactCodeMirror {
padding: 5px;
width: 100%;
background-color: #ddf;
}
.CodeMirror {
height: 100%;
border: 1px solid #ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="root">
<div class="App">
<nav class="navbar navbar-default"></nav>
<div class="editorContainer">
<div style="background-color: #aaf; width: 160px;">Side bar</div>
<div class="ReactCodeMirror">
<div class="CodeMirror">Should fill light blue area</div>
</div>
</div>
</div>
</div>
First off, something is wrong with the class declaration of CodeMirror, according to your code, it requires the div to contain a subclass of cm-s-robocom, i.e:
<div class="CodeMirror cm-s-robocom">Should fill light blue area</div>
If you want this css declaration to have either .CodeMirror or .cm-s-robocom, you should use a comma between:
.CodeMirror, .cm-s-robocom {height: 100%; border: 1px solid #ccc;}
What fixed it for me in safari was adding height: 100% to both editorContainer and ReactCodeMirror:
div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;height:100%;}
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf;height:100%;}
So the final snippet is - I think you should also add height 100% on the side-bar to make it appear ok:
html, body, #root {margin: 0; padding: 0; height: 100%; }
.App {display: flex; flex-flow: column; height: 100%; }
div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;}
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf; display: flex; flex: 1 1; }
.CodeMirror {border: 1px solid #ccc; display: flex; flex: 1 1; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="root">
<div class="App">
<nav class="navbar navbar-default"></nav>
<div class="editorContainer">
<div style="background-color: #aaf; width: 160px; top: 0; bottom: 0; position: relative;">Side bar</div>
<div class="ReactCodeMirror">
<div class="CodeMirror">Should fill light blue area</div>
</div>
</div>
</div>
</div>
Just add height: 100% on .CodeMirror (bug in Safari causes this to not work properly)
So you will need to add display: flex to the .CodeMirror parent, flex: 1 to the child.
html, body, #root {margin: 0; padding: 0; height: 100%; }
.App {display: flex; flex-flow: column; height: 100%; }
div.editorContainer {flex: 1 1 auto; display: flex; margin-bottom: 1em;}
div.ReactCodeMirror {padding: 5px; width: 100%; background-color: #ddf; display: flex;}
.CodeMirror {border: 1px solid #ccc; flex: 1;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="root">
<div class="App">
<nav class="navbar navbar-default"></nav>
<div class="editorContainer">
<div style="background-color: #aaf; width: 160px;">Side bar</div>
<div class="ReactCodeMirror">
<div class="CodeMirror">Should fill light blue area</div>
</div>
</div>
</div>
</div>
This should work
div.CodeMirror{height: 100%;}
I'm trying to use flexbox for a full page lay-out, but when there isn't enough text in the main area, it isn't stretched vertically to fill the remaining space of the page as I expected.
It behaves like I specified align-content: space-between, but I didn't. What am I doing wrong here?
body {
display: flex;
flex-flow: row wrap;
align-content: stretch;
/* no effect here */
height: 100%;
width: 100%;
margin: 0px;
}
body > #header-area {
flex: 1 1 auto;
order: 1;
width: 100%;
height: 150px;
}
body > #menu-area {
flex: 0 0 180px;
order: 2;
}
body > #main-area {
flex: 1 1 auto;
order: 3;
}
body > #aside-area {
flex: 0 0 150px;
order: 4;
}
body > #footer-area {
flex: 1 1 auto;
order: 5;
width: 100%;
height: 100px;
}
<div id="main-area" style="background-color: aqua">
main area
</div>
<div id="menu-area" style="background-color: lavender">
menu area
</div>
<div id="aside-area" style="background-color: lemonchiffon">
sidebar area
</div>
<div id="header-area" style="background-color: lightsteelblue">
header area
</div>
<div id="footer-area" style="background-color: lightskyblue">
footer area
</div>
Thanks for any help!
If you can wrap your middle content, then I would do it like this
html {height:100%;} /* add this */
body {
display: flex;
flex-direction: column;
min-height: 100%; /* change this to min-height */
width: 100%;
margin: 0;
padding:0;
}
body > #header-area {
/* flex: 1 1 auto; - not sure what this is for so I have removed it */
order: 1;
width: 100%;
height: 150px;
}
#menu-area {
flex: 0 0 180px;
order:1;
}
#main-area {
flex: 1 1 auto;
order:2;
}
#aside-area {
flex: 0 0 150px;
order:3;
}
body > #footer-area {
/* flex: 1 1 auto; - not sure what this is for so I have removed it */
order: 3;
width: 100%;
height: 100px;
}
#content {
flex-direction:row;
display:flex;
flex-grow:1;
order:2;
}
<div id="content">
<div id="main-area" style="background-color: aqua">
main area
</div>
<div id="menu-area" style="background-color: lavender">
menu area
</div>
<div id="aside-area" style="background-color: lemonchiffon">
sidebar area
</div>
</div>
<div id="header-area" style="background-color: lightsteelblue">
header area
</div>
<div id="footer-area" style="background-color: lightskyblue">
footer area
</div>