Horizontal slider gets pushed down from page in react-bootstrap - html

Question

So I am creating an application with a sidebar and topbar where the content on the right side changes and the sidebar and topbar are fixed. Now I want to create a page where I can put a horizontal carousel / slider for cards, but this gets pushed down for some rease. I don't think it has anything to do with the cards, but only with the slider since one card gets displayed correctly.
Page with slider]1 and Page with 1 card, ideally the slider should be on the same space where the card is displayed. I think it has something to do maybe with the react-bootstrap Col but I am not sure.
Page.js
const array = [...Array(50).keys()];
return (
<Container fluid className="justify-content-between align-content-between mt-0 mt-lg-4">
<Row>
<Col lg="9" m="4" className="mt-4 mt-lg-0">
<div>
<Slider items={array} />
</div>
</Col>
</Container>
)
Slider.js
return (
<div className="slider">
{ items.map((item, index) => (
<div key={index} className="slider-card-wrapper">
{/*<div>lol</div>*/}
<ProductCard />
</div>
)) }
</div>
)
Slider.css
.slider {
display : -webkit-box;
overflow-x : scroll;
overflow-y : hidden;
border-radius : 5px;
}
.slider-card-wrapper {
margin-left : 10px;
margin-right : 10px;
}
ProductCard.js
return (
<Card className="product-card">
{ isIMG &&
<div className="product-card-img">
<Card.Img variant="top" className="product-card-img" src="" />
<div className="product-card-img-overlay"/>
<div className="product-card-img-text">
text
</div>
</div>
}
<Card.Body className="product-card-body">
body
body
<br/>
body
</Card.Body>
<div className="product-card-divider" />
<Card.Footer className="product-card-footer">
<Link className="product-card-footer-link" to="/dashboard/product">
VIEW ITEM
</Link>
</Card.Footer>
</Card>
)
ProductCard.css
.product-card {
max-height : 400px;
max-width : 250px;
border-radius : 10px 10px 5px 5px;
border : 0;
-webkit-box-shadow: 0 0 14px #e7e7e7;
box-shadow: 0 0 14px #e7e7e7;
word-wrap : break-word;
}
.product-card-img {
position : relative;
border-radius : inherit;
border-color : transparent;
}
.product-card-img-actual {
display : block;
overflow : hidden;
border-radius : inherit;
}
.product-card-img-overlay {
position : absolute;
text-align : left;
left : 0;
right : 0;
top : 0;
bottom : 0;
border-radius : inherit;
background : #1f1f1fff;
opacity : 0.15;
}
.product-card-img-text {
margin-left : 10px;
margin-bottom : 10px;
}
.product-card-body {
text-align : center;
}
.product-card-footer {
text-align : center;
justify-content : center;
border-top-width : 3px;
border-color : #e0e0e0;
background : transparent;
}
.product-card-footer-link {
color : #008d74;
text-decoration : None;
font-weight : bold;
margin-top : 2px;
margin-bottom : 2px;
}
Sidebar.js
return (
<div className={classNames("sidebar", {"open" : isSidebarOpen})}>
<ChevronDoubleLeftIcon
className={classNames("sidebar-toggle", {"closed" : !isSidebarOpen})}
onClick={onSideBarOpen}
/>
<Nav className="flex-column">
{ routes.map((route, index) => (
route.sub_routes ?
<SidebarMenu
key={index}
data={route}
/>
:
<SidebarItem
key={index}
text={route.name}
icon={route.icon}
path={route.path}
/>
)) }
</Nav>
</div>
)
Sidebar.css
.sidebar {
min-width: 230px;
max-width: 240px;
height : 100vh;
margin-left: -200px;
background: #f7f9fb;
transition: all .5s;
}
.sidebar.open {
margin-left: -10px;
transform: scale(1);
transition: .5s;
}
.sidebar-item {
display: inline-flex;
margin-top: 1em;
color: #000000;
font-weight: bold;
}
.sidebar-item:hover {
background-color: #f2f4f7;
}
.sidebar-menu {
color: #000000;
font-weight: bold;
margin-top: 1em;
}
.sidebar-menu-item {
color: #000000;
font-weight: bold;
margin-top: 0.75em;
margin-left: 1.75em;
}
.sidebar-menu-item:hover {
background-color: #f2f4f7;
}
.sidebar-menu-icon {
color: #000000;
}
.sidebar-toggle {
position: relative;
height: 1.25em;
width: 1.25em;
top: 10px;
left: 0px;
z-index: 999;
float: right;
background-color: #f7f9fb;
color: #000000;
cursor: pointer;
border-radius: 0px .25em .25em 0px;
transition: transform .5s ease-in-out;
}
.sidebar-toggle.closed {
transform-origin: center;
transform: translateX(-0px) rotate(180deg) ;
}
.nav-item {
color: #000000;
font-weight: bold;
}
.nav-link {
color: #000000;
font-weight: 600;
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-icon {
color: #000000;
width: 1.25em;
height: 1.25em;
margin-right: 0.75em;
}
Topbar.js
return (
<Navbar bg="light" expand="lg" sticky="top">
<Container fluid>
<Navbar.Brand href="#">PPDB</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll"/>
<Navbar.Collapse id="navbarScroll">
<Nav
className="me-auto my-2 my-lg-0 justify-content-center"
style={{maxHeight: '100px'}}
navbarScroll
>
<Nav.Link href="Dashboard">Home</Nav.Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
)
Layout.js
return (
<div>
<Container fluid className={"h-100"} style={{paddingLeft : "0px", paddingRight : "0px"}}>
<Topbar />
<Row className={"h-100"}>
<Sidebar />
<Col>
<Suspense fallback={<Spinner animation="border" role="status" />}>
<Routes>
<Route path='/' element={<h1> BASE </h1>} />
{ routes.map((route, index) => (
route.sub_routes ?
route.sub_routes.map((sub_route, i) => (
<Route
path={sub_route.path}
key={i}
element={<sub_route.component />}
/>
))
:
<Route
path={route.path}
key={index}
element={<route.component />}
/>
)) }
</Routes>
</Suspense>
</Col>
</Row>
</Container>
</div>
)

Answer 1

You overuse Grid there (like many other people do), as you do not have a real two-dimensional layout. I would strongly recommend to stick to flexbox as much as possible. There is a component for it in react-bootstrap called Stack. Using only Stack you will come very far. In your case I would layout application only with this component:
Look into following sandbox: https://codesandbox.io/s/clever-elion-frb220. I have provided colors, ids, names and some padding, so you can see how this layout is structured:
Upper Stack is vertical, for stacking top appbar/navbar and the rest of your application
Lower Stack is horizontal, for stacking sidebar(probably with fixed width) and the content section
Regarding your problem: In your Layout component you define a Row, but do not define Cols everywhere - the imported Sidebar component is not a Col.
Grid is for example useful when:
You have table like structure (two-dimensional)
You want to define responsive design with different layout on some breakpoints
You want to work with offsets, so things are aligned consistently.