Search code examples
reactjssidebarsticky

Why sidebar not sticky or fixed in left and right side in React.js?

I have a react.js project, and everything works correctly, but when I delete components in the middleside, sidebar in left and right move to middleside. I want to sticky sidebars on left and right, even I delete feed components in middle. Any idea will be appreciated.

Screenshot1:

enter image description here

Screenshot2:

enter image description here

Widgets.js:

   import React from 'react';
import './Widgets.css'; 
import InfoIcon from '@material-ui/icons/Info';
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';

function Widgets() {
    const newsArticle = (heading, subtitle) => (
<div class="widgets__article">
<div class="widgets__articleLeft">
 <FiberManualRecordIcon/>
</div>
<div class="widgets__articleRight">
    <h4>{heading}</h4>
    <p>{subtitle}</p>
</div>
</div>
    )
    return (
        <div className= 'widgets'>
<div class="widgets__header">
    <h2>LinkedIn News</h2>
    <InfoIcon/>
</div>
{newsArticle("Nesim11 react clone", "Top news - 9099 readers")}
{newsArticle("The Six Morning Habits of High Performers", "How to Be Awesome at Your Job")}
{newsArticle("Unconscious Bias", "Stacey Gordon")}
{newsArticle("Nesim11 react clone", "Top news - 9099 readers")}
{newsArticle("The Six Morning Habits of High Performers", "How to Be Awesome at Your Job")}
{newsArticle("Unconscious Bias", "Stacey Gordon")}
</div>
    );
}

export default Widgets

Widgets.css:

  .widgets {
    position: sticky;
    top: 80px;
    flex:0.2;
    background-color: white;
    border-radius: 10px;
    border: 1px solid lightgray;
    height: fit-content;
    padding-bottom: 10px;
}
.widgets__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    
}
.widgets__header > h2 {
    font-size: 16px;
    font-weight:400;
}
.widgets__article{
    display: flex;
    padding:10px; 
    cursor: pointer;
}
.widgets__article:hover{
    background-color:whitesmoke;
}
.widgets__articleLeft{
    color: #0177b7;
    margin-right: 5px;
}
.widgets__articleLeft > .MuiSvgIcon-root {
    font-size: 15px;
}
.widgets__articleRight{
    flex: 1;
}
.widgets__articleRight > h4 {
    font-size: 14px;
}
.widgets__articleRight > p {
    font-size: 12px;
    color:grey;
}
Solution

  • I would suggest using justify-content on your container element and set it to space between. You can try some of the other ones and see what you like the most.

    Here's a quick example:

    .container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.box {
  width: 100px;
  height: 100px;
}

.one {
  background: blue;
}

.two {
  background: red;
}

.three {
  background: yellow;
}

    https://jsfiddle.net/fm05h2dq/