I currently have a ReactJS + React Router project set up and in Chrome dev tool under elements shows:
<body>
<div class="wrapper">
<div data-reactroot>
<div>
<div class="container">Center Me</div>
</div>
</div>
</div>
</body>
with styling and none for class="wrapper":
.container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
Yet the <div class="container">Center Me</div> is staying at the top and centered horizontally but not vertically.
I checked the size of that div and it is extremely short but takes up full width of the browser page.
What could I be doing wrong? How can I center <div class="container">Center Me</div>? I even tried to set 100% for width and height on a higher level, but still does not work.
Just:
<div style={{display: 'flex', justifyContent:'center', alignItems:'center', height: '100vh'}}>
<h1> I am centered </h1>
</div>
or css:
.centered {
height: 100vh; /* Magic here */
display: flex;
justify-content: center;
align-items: center;
}
<div class="centered">
<h1> I am centered </h1>
</div>
Here's a code example that basically recreates your page but without react. Hope this helps and shoot away if you have any questions.
html, body{
width: 100%;
height: 100%;
}
.wrapper{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
height: 300px;
width: 300px;
background: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
<html>
<body>
<div class="wrapper">
<div data-reactroot>
<div class="container">
<div>
<!-- Anything below this line will be centered -->
<div>Hello World!</div>
<div>Center Me</div>
<!-- Anything above this line will be centered -->
</div>
</div>
</div>
</div>
</body>
<html>
I just wrap my div with Grid and added justify="center" attr.:
<Grid container spacing={2} justify="center"></Grid>
Yes, for react,
for becomes htmlFor, and class becomes className etc.
see full list of how HTML attributes are changed here:
https://facebook.github.io/react/docs/dom-elements.html
const App = () => {
const styles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
};
return (
<div style={styles}>
<h2>Hello All</h2>
</div>
);
};
export default App;
In React You need to use className not class. className="wrapper
Related
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 1 year ago.
I have 2 divs both with the same class and when I add content to one the height of the other also changes.
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
}
<div class="container">
<div class="bansContainer">
<div class="list">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
How can I change/update it in a way that only the height of the div with content being added changes?
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
align-self: flex-start;
}
<div class="container">
<div class="bansContainer">
<div class="list">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
It is because you haven't specified height on the first column and it's continuing to adapt the height of its parent div aka bansContainer. So here are two approaches. One is you add align-self: flex-start; or you specify a height on the column.
function addContent() {
document.getElementsByClassName('list')[1].innerHTML += "<h1>test</h1>"
}
.container {
width: 79%;
margin: 0 auto;
}
.bansContainer {
display: flex;
margin: 25px 0;
overflow: auto;
justify-content: space-between;
}
.list {
background-color: #436935;
/*align-self: flex-start;*/
}
.n-h {
height: fit-content;
}
<div class="container">
<div class="bansContainer">
<div class="list n-h">
<h1>
left
</h1>
</div>
<div>
<h1 class="list">
right
</h1>
<button onclick=addContent()>Click</button>
</div>
</div>
</div>
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
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%;
}
$(".div3Btn").click(function() {
$(".div2").show("slide", {
direction: "up"
}, 5000);
});
.div1 {
display: flex;
height: 100%;
flex-direction: column;
background-color: #919191;
}
.div2 {
display: flex;
overflow-y: auto;
flex: 1;
height: 500px;
background-color: #a8d810;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div class="div2" style="display: none;">hjghjgjghj</div>
<div class="div3">
<button class="div3Btn">Click me!</button>
</div>
</div>
I have a question about using the show()/hide() function with time and direction. As the above snippet shows, if the button was clicked, it will immediately jump to the bottom, but not following the div1 to slide down. Then how can I fix it if I want to use that function?
$(".div3Btn").click(function() {
$(".div2").slideToggle(5000);
});
.div1 {
display: flex;
height: 100%;
flex-direction: column;
background-color: #919191;
}
.div2 {
display: flex;
overflow-y: auto;
flex: 1;
height: 500px;
background-color: #a8d810;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div class="div2" style="display: none;">hjghjgjghj</div>
<div class="div3">
<button class="div3Btn">Click me!</button>
</div>
</div>
(The problem is quite similar to using Firefox to run the link function)
Another question about slide down and up is when I use flex: 1 for some divs, and then use the slideToggle() function, it does not have any slide down or up animation of the div. How to fix it if I must use flex: 1 for divs?
I think you've formatted the .show() function wrong. Try .show( duration [, easing ] [, complete ] )
$(".div3Btn").click(function() {
$(".div2").show(5000, "swing", function() {
// Animation complete.
});
});
.div1 {
display: flex;
height: 100%;
flex-direction: column;
background-color: #919191;
}
.div2 {
display: flex;
overflow-y: auto;
flex: 1;
height: 500px;
background-color: #a8d810;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div1">
<div id="div2" class="div2" style="display: none;">hjghjgjghj</div>
<div class="div3">
<button id="div3Btn" class="div3Btn">Click me!</button>
</div>
</div>
I have a <div> like below
<div style="right:0px;bottom:0px;position:absolute;">
</div>
When my mobile site is opened in portrait mode, this div is displayed correctly at the bottom right corner.
But, when opened in landscape mode it is displayed at corner and overlaps the elements already present.
I want this div to be at the bottom of all elements at the bottom right corner of the page. How do I do it?
I would suggest to use flexbox - but it could need to reorganise a little your css code
.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>