I have come across a problem whereby if I add rows to an overflow container some of the rows at the top are obscured. My real application is a bit more complicated than this in that it also adds things inside of the row, and if you pick a "wrong" option, then the top row gets hidden completely.
Is it possible to fit all of the rows inside of the container, so that when you scroll all the way to the top, you can always see the topmost row? Currently, depending on how many rows you have, a portion, or whole top row is hidden.
JsFiddle link.
And also code here:
window.onload = function() {
let addBtn = document.getElementById("addRow");
addBtn.addEventListener('click', function() {
let wrapper = document.getElementById("wrapper");
let newRow = "<div class='row'></div>"
wrapper.innerHTML += newRow;
})
};
body {
display: flex;
justify-content: center;
}
#wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 40vh;
width: 1000px;
background-color: yellow;
overflow-y: auto;
}
.row {
display: block;
background-color: aliceblue;
min-height: 50px;
margin-top: 10px;
width: 80%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div id="wrapper">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div>
<button id="addRow">Add</button>
</div>
</body>
</html>
Remove align-item: center from #wrapper.
The problem is this property align all children rows in the middle of parent #wrapper.
So if you count the rows it's just the half of rows that should be appeared.
Try to inspect it, half of rows are above #wrapper which can't be viewed.
you can also have some padding to #wrapper to have some color below the last row.
check this Fiddle
Updated fiddle with the solution - https://jsfiddle.net/zL61c84x/
#wrapper {
height: 40vh;
width: 1000px;
background-color: yellow;
overflow-y: auto;
}
#wrapperInner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
Related
I have this div with three inner divs.
ONE - I am div TWO - I am div THREE - I am div
But in mobile it can only fit two divs in a row horizontally, I need divs after 2nd to step down.
Like this:
ONE - I am div TWO - I am div
THREE - I am div
How do I do this?
I am using flex.
Edit
I have added HTML code.
I am using React and other UI component and I tried to minimize it in HTML. It's something like this right now.
<div class="parent">
<div class="child">
<span>ONE</span>
<p>I am div</p>
</div>
<div class="child">
<p>TWO</p>
<p>I am div</p>
</div>
<div class="child">
<span>THREE</span>
<p>I am div</p>
</div>
<div>
.parent {
display: flex;
justify-content: space-around;
margin-bottom: 3rem;
white-space: nowrap;
}
.child {
display: flex;
align-items: center;
margin-left: 1rem;
margin-right: 1rem;
}
You can use flex-wrap to continue on the next line. justify-content will center the div
.outer {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* Styles below are for demonstration purposes */
.inner {
height: 50px;
width: 300px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
<div class="outer">
<div class="inner red">A</div>
<div class="inner green">B</div>
<div class="inner blue">C</div>
</div>
This will work for responsive layout, and it also permits them to fit in one line, if the screen size allows it. You can use media query to set it for mobile only.
.outer{
display: flex;
flex-flow: wrap;
text-align: center;
}
.inner{
flex-grow: 1;
}
I have something like this:
HTML:
<div id="container">
<img src="leftphoto.jpg" id="left">
<div id="right">Description</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
background-color:#252525;
}
#container{
position: relative;
display: flex;
justify-content: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
height: 40vw;
}
#left{
max-width: 75vw;
height:100%;
}
#right{
min-width: 300px;
height:100%;
color:white;
width:20vw;
background-color: red;
color: #ffffff;
font-size: 11px;
overflow: auto;
}
I want the right div to go down, under left div with the same width. How can I achieve that?
What I have:
When I resize window, it is smaller:
But I want the right div to go down, under the left div and also I would like to get the same width on both divs:
I was trying a lot of different things, but I couldn't achieve this. Do you have any advice?
You can use flex blox to achieve this. Simply place on the container of the divs. Once that is done you can change the divs placement by flex-direction row/column. Similarly, for placing the 2nd div above the first div once the size reduce, you can set media query for a specific screen where you can reverse the column and you done.
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width:768px){
.container{
display: flex;
flex-direction: column-reverse
}
}
<div class="container">
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
<div class="content">
<p>Content</p>
</div>
</div>
Create a second container in your html and they will naturally align under eachother
<div class="container">
<div class="content-Container">
<img src="leftphoto.jpg" id="left" />
<div id="right">Description</div>
</div>
</div>
and then position them to the middle of the page by adding style to the parent container
When I have a .sections container with several .section elements inside, and setup scroll-snap, it will ONLY work if I give the section a fixed height of 100vh. Without the height, the scroll-snap will not work. This is fine, except without the fixed height, scrollTo works correctly, and when I add the height to the section, scrollTo no longer works.
Here is an example. You can comment out the height: 100vh; line in the .section CSS and see that clicking anywhere will scroll down to section #3, but with the height turned on, it won't scroll.
I have tried to console.log the position it is scrolling to and it is correct, but the scroll never actually takes place. Any ideas as to why this is not behaving the way I would like?
NOTE: I am seeing this behavior in the latest Chrome. I have not tested another browser.
// Click on document to scroll to section 3
document.body.onclick = function() {
console.log('SCROLLING...');
const el = document.getElementById('s3');
const pos = el.getBoundingClientRect();
window.scrollTo(0, pos.top);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.sections {
overflow-y: scroll;
scroll-snap-type: y mandatory;
/**
* Adding the below line breaks scrollto, removing
* it breaks scroll-snap....
*/
height: 100vh;
}
.section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
position: relative;
border: 5px solid deeppink;
font-size: 30px;
font-weight: bold;
scroll-snap-align: center;
}
<html>
<body>
<div class="sections">
<div class="section" id="s1">SECTION 1</div>
<div class="section" id="s2">SECTION 2</div>
<div class="section" id="s3">SECTION 3</div>
<div class="section" id="s4">SECTION 4</div>
<div class="section" id="s5">SECTION 5</div>
</div>
</body>
</html>
Thanks to #Temani Afif for the comment. They correctly pointed out that I cannot scroll using the body, I need to scroll using the .sections container.
Here is a working example now:
// Click on document to scroll to section 3
document.body.onclick = function() {
console.log('SCROLLING...');
const el = document.getElementById('s3');
const pos = el.getBoundingClientRect();
const sections = document.querySelector('.sections');
sections.scrollTo(0, pos.top);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
.sections {
overflow-y: scroll;
scroll-snap-type: y mandatory;
height: 100vh;
}
.section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
position: relative;
border: 5px solid deeppink;
font-size: 30px;
font-weight: bold;
scroll-snap-align: center;
}
<html>
<body>
<div class="sections">
<div class="section" id="s1">SECTION 1</div>
<div class="section" id="s2">SECTION 2</div>
<div class="section" id="s3">SECTION 3</div>
<div class="section" id="s4">SECTION 4</div>
<div class="section" id="s5">SECTION 5</div>
</div>
</body>
</html>
I have been studying CSS flex recently and was trying out some simple tasks with it. One of these tasks was to make a timeline with alternating elements being above or below a mid-line.
I would like to be able to set an initial width and a fixed height, so that when the content exceeds the height of the div and overflows, the width will expand to accommodate the content, and hopefully there will be no overflow.
https://codepen.io/anon/pen/roVOXB
<div class="content">
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
<div class="box">
<div class="above"></div>
<div class="below">Content of the div</div>
</div>
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
<div class="box">
<div class="above"></div>
<div class="below">Content of the div</div>
</div>
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div>
</div>
</div>
.content {
display: flex;
}
.box {
display: flex;
flex-direction: column;
}
.above, .below {
height: 350px;
display: flex;
min-width: 300px;
border: 1px solid #000;
}
.above {
display: flex;
align-items: flex-end;
background: orange;
}
.below {
display: flex;
align-items: flex-start;
background: aqua;
}
I know it might be a simple solution and its staring me right in the face, but I have tried everything with max-widths, max-heights, overflows and wrapping the text but nothing can help me achieve the desired outcome so far.
I would really appreciate any help. Thanks!
You can change the elements dynamically using the following JS:
var allElements = document.querySelectorAll('.below, .above');
allElements.forEach((Ele) => {
if(Ele.scrollHeight > 350){
Ele.style.minWidth = (Ele.scrollHeight) + "px";
}
});
What is does it iterate through all the elements with classes below and above, then checks if it uses more height than the height: 350px, if it is > 350px, then it will adjust accordingly.
Just add the above JS code in your codepen JS editor, and you're good to go. Try adding more content to it and it will dynamically change the width w/o overflow.
If the number of columns is static, you can remove the min-width from .above, .below.
Add min-width: 2700px; to .content.
I am having trouble making my columns the same height. I would simply like to make the columns the same height. Here is my code:
HTML:
<main>
<div id="left-column">
<div id="facets"></div>
</div>
<div id="right-column">
<div id="stats"></div>
<div id="hits"></div>
<div id="pagination"></div>
</div>
</main>
CSS:
#left-column {
float: left;
width: 25%;
background-color: #fff;
border-right: 1px solid #cdcdcd;
}
#right-column {
width: 75%;
margin-left: 25%;
}
The issue I'm having is that because the id's of each of the divs dynamically generate content, the heights of each columns will be based on what are inside those divs. Is there any way to set the column to the height of whatever is longer than the other column? Or is there a way to set the column height to something fixed? I have tried to add height: 1000px for each of the ids but that doesn't even seem to apply to the CSS. Any help would be appreciated.
There are two big options: Use Javascript, or don't use Javascript.
If you use Javascript, assuming you use a library which helps certain portions of your code become cross-browser without a lot of work on your part, then it's almost guaranteed to work on any browser that supports it.
Big Fall Back: If someone has Javascript disabled it doesn't look good.
Not Javascript
Recently CSS has gotten a new display type, flex. Now, it should be said, based on Can I Use, IE 11 has messed up support for flexbox, but a majority of browsers support it (85% support it without prefixes, and that includes most mobile browsers too!)
.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#left-column {
-webkit-box-flex: 0;
-webkit-flex: 0 0 25%;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
border-right: 1px solid #CDCDCD;
}
#right-column {
-webkit-box-flex: 1;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
padding-left: 5px;
}
<main class="flex-container">
<div id="left-column">
<div id="facets">test</div>
</div>
<div id="right-column">
<div id="stats" test></div>
<div id="hits">test</div>
<div id="pagination">test</div>
</div>
</main>
Via CSS and to include older browsers like IE8 you have display:table/table-cell.
main {
display: table;
table-layout: fixed;
width: 100%;
}
#left-column {
display: table-cell;
width: 25%;
background-color: #fff;
border-right: solid ;
}
#right-column {
display: table-cell;
width: 75%;
}
<main>
<div id="left-column">
<div id="facets">facets</div>
</div>
<div id="right-column">
<div id="stats">stats</div>
<div id="hits">hits</div>
<div id="pagination">pagination</div>
</div>
</main>
To include very old browser, you may also see http://alistapart.com/article/fauxcolumns a very solid technics since you columns have fixed width
If you want to restrict the height of each column to a limit. you can use max-height and min-height rule. But if you want to do it using Javascript. Here is the algorithm assuming that you call this function after your columns have had their content data filled in
function setHeight() {
var leftCol = document.querySelector("#left-column");
var rightCol = document.querySelector("#right-column");
var largerHeight = Math.max(leftColHeight.getBoundingClientRect().height, rightColHeight.getBoundingClientRect().height);
leftCol.style.height = largerHeight + "px";
rightCol.style.height = largerHeight + "px";
}
you may try and check my code I have use display flex to do what you want done .. check this link https://jsfiddle.net/qpfrtqh2/1/
.parent{
display: flex;
}
You can get help by using this code.
You need to use flex css.
<ul class="list">
<li class="list__item"><!-- content --></li>
<li class="list__item"><!-- content --></li>
<!-- other items -->
</ul>
and css as like below.
.list
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.list__item
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
You need some javascript code for fallback of flex css.
Try this (I added some background-colors just to see result)
main{ overflow: hidden;
}
#left-column {
float: left;
width: 25%;
background-color: red;
border-right: 1px solid #cdcdcd;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#right-column {
background-color: green;
width: 75%;
margin-left: 25%;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
<main>
<div id="left-column">
<div id="facets">aa</div>
</div>
<div id="right-column">
<div id="stats">bb</div>
<div id="hits">cc</div>
<div id="pagination"></div>
</div>
</main>
There is no need to use javascript for that.
Just leverage standard table display in CSS.
FIDDLE