How can I render the same component inside a map, without overlapping, but one below another
Here's what i mean:
return (
<div className='app'>
{[0, 1, 2, 3].map(element => {
return(<MyComponent props = {element}/>)
})}
</div>
)
How can I display that component in a scrollable list, considering that its height is auto?
You are Describing the Default Behavior Already
How can I display that component in a scrollable list, considering that its height is auto? [emphasis mine]
With height:auto;, the behavior you describe happens already:
.item {
height:300px;
border: 1px solid black;
}
<div class='app'>
<div id="1" class="item"></div>
<div id="2" class="item"></div>
<div id="3" class="item"></div>
</div>
But if you wanted a Limited Scroll
You need two things:
You need to add overflow-y to be set to scroll.
You need to set the height to how much of a scrollbar you want.
.app {
height: 40px;
overflow-y: scroll;
}
.item {
height:30px;
border: 1px solid black;
}
<div class='app'>
<div id="1" class="item"></div>
<div id="2" class="item"></div>
<div id="3" class="item"></div>
</div>
you can add the following css:
.app{
display: flex;
flex-direction: column;
gap: 2vh;
overflow-y: auto;
}
Related
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
function App() {
return (
<Carousel showArrows={true}>
<div>
<img src="../assets/1.jpeg" alt="image1" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="../assets/2.jpeg" alt="image2" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="../assets/3.jpeg" alt="image3" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
}
export default App;
i added the css file in App component similar like react-responsive-carousel but it is not working
carousel.min.css
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
It should be working but not sure why this is happening
I don't know about this library, But I can see you are not doing something complicated with your carousel. So basically why don't you create one for yourself?
I have a base code that could help you in this matter.
I create a carousel with React and Static UI(HTML, CSS, JS).
I think it can actually help you out.
replit, codesandbox, Stackblitz
these versions are written with html css js and nothing else.
replit, codesandbox, Stackblitz
In your scenario I will do this:
const modalSlidesContainer = document.querySelector(".modal-slides-container");
const modalWidth = 300;
let modalPage = 0;
const nextPage = () => {
modalPage++;
modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};
const previousPage = () => {
modalPage--;
modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};
/* you set root to define varibales */
:root {
--modal-width: 300px;
--modal-height: 400px;
--number-of-pages: 5;
}
html body{
margin: 0px;
}
.modal-background{
background-color: rgba(0,0,0,0.4);
position: absolute;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
}
.modal-boundary{
width: var(--modal-width); /* the width boundary must be as same as every modal slide*/
height: var(--modal-height);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
overflow-x: hidden;
z-index: 10;
/* the max width must be as same as the width of modal ModalBoundary*/
#media screen and (max-width: var(--modal-width)) {
width: 100vw;
height: 100vh;
}
}
/* This container contains every slide you gonna use in your modal */
.modal-slides-container{
min-width: calc(var(--modal-width) * var(--number-of-pages)); /* The width must be total width of all the slide you gonna use */
height: var(--modal-height);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
background-color: white !important;
/*here is how to control carousel movement*/
margin: 0px; /*this how we control the place of the modal*/
transition: margin 1s; /*this how you control the animation of carousel when it's changing steps */
}
.modal-slide{
width: var(--modal-width);
height: var(--modal-height); /* in this scenario the total height of slide must be as same as modal height*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white !important;
}
.button-container{
width: 100%;
margin-top: 10px;
display: flex;
flex-direction: row;
}
.navigation-button{
margin: auto;
}
<body>
<div class="modal-background">
<div class="modal-boundary">
<div class="modal-slides-container">
<div class="modal-slide">
<img alt="first image" src="https://picsum.photos/200/200" />
<p> Legend One </p>
<div class="button-container">
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="second image" src="https://picsum.photos/200/200" />
<p> Legend Two </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="third image" src="https://picsum.photos/200/200" />
<p> Legend Three </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="fourth image" src="https://picsum.photos/200/200" />
<p> Legend Four </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="fifth image" src="https://picsum.photos/200/200" />
<p> Legend five </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
</div>
</div>
</div>
</div>
</div>
</body>
I hope this helps you.^-^
I have NavBar.jsx:
import React from "react";
import { Link } from "react-router-dom";
import "./navBar.sass";
function NavBar() {
return (
<div className="NavBar_container">
<nav className="NavBar">
<Link
to="/CreateReview"
className={(isActive) =>
"selected" + (!isActive ? " unselected" : "")
}
>
<div className="NavBar_img">
<img src="./create_review_icon.png" alt="create_review" />
</div>
<p className="NavBar_title">Create Review</p>
</Link>
<Link to="/Hotels" className="NavBar_item">
<div className="NavBar_img">
<img src="./main_page_icon.png" alt="main_page" />
</div>
<p className="NavBar_title">Reviews</p>
</Link>
<Link to="/MyAccount" className="NavBar_item">
<div className="NavBar_img">
<img src="./my_account_icon.png" alt="my_account" />
</div>
<p className="NavBar_title">My account</p>
</Link>
</nav>
;
</div>
);
}
export default NavBar;
And some styles:
.NavBar
position: fixed
z-index: 9999
display: flex
justify-content: space-between
width: 400px
height: 75px
padding: 15px 25px 0 25px
background-color: rgba(0, 0, 0, 0.81)
border-bottom-left-radius: 30px
border-bottom-right-radius: 30px
&_container
width: 450px
margin: 0 auto
&_item
text-decoration: none
&:hover , &:active
.NavBar_title
transition: 0.2s all
color: #DAAD86
border-bottom: 1px solid #DAAD86
.NavBar_img
transition: 0.2s all
transform: scale(1.1)
&_img
width: 35px
margin: 0 auto
&_title
text-align: center
color: white
padding-bottom: 5px
.selected
background-color: blue
.unselected
background-color: red
I'm trying to set up my NavBar so that the selected link changes style, nothing works right now, what's wrong? I would like the text under the image to change its color and become underlined (as it is done in the :hover classes). I did this according to the React-Router documentation, maybe I missed something?
In your app.jsx file, or wherever you have your navbar component rendering, use the useLocation hook provided by 'react-router-dom' to get the current page. You can then pass it to your navbar as props and give the links the 'selected' class if the current page === the page the link points to.
I have two divs that are next to each other: artwork__feed and preview
When I map through my db, the images render horizontally and overflow into the preview div.
See here:
Question
How do I render all of my FeedCard components vertically so they don't overflow into my preview div?
Here is my render code:
return (
<div className="feed">
<div className="artwork__feed">
{artworks.map((artwork) => (
<FeedCard
imageUrl={artwork.imageUrl}
title={artwork.title}
artist={artwork.artist}
year={artwork.year}
/>
))}
</div>
<div className="preview">
<div className="phone"></div>
</div>
</div>
);
}
Here is my FeedCard code:
function FeedCard({
imageUrl,
title,
artist,
year,
medium,
height,
width,
category,
}) {
return (
<div className="feed__card">
<div className="feed__card__container">
<div className="feed__category">
<img src={imageUrl} className="artwork__image__feed" />
</div>
<div className="artwork__info">
<div className="artwork__title__artist">
<h1>{title}</h1>
<p>{artist}</p>
</div>
<div className="artwork__bid_button">
<button>Bid</button>
</div>
</div>
</div>
</div>
);
}
And here is my Feed.css code:
.artwork__feed {
display: flex;
align-items: center;
background-color: white;
}
probably grid is your best option:
.artwork__feed {
display: grid;
/*this will give two equal columns*/
grid-template-columns: 1fr 1fr;
align-items: center;
background-color: white;
}
Goal: Align items centrally in div
See picture here (notice every watch is shifted to the left):
I'm trying to render each item in productcard centrally.
Currenty, each productCard__container renders to left.
Here is my ProductCard.js code:
return (
<div className="productcard">
<button onClick={(e) => history.push(`/product/${id}`)}>
<div className="productCard__container">
<img src={image} />
<h1>{brand}</h1>
<h2>{name}</h2>
<p>${price}</p>
</div>
</button>
</div>
...and the CSS code:
.productcard {
margin: 10px;
border-radius: 12px;
background-color: black;
}
.productCard__container {
align-items: center;
}
You can use css flex box
.productcard {
display: flex;
justify-content: center;
}
The Problem
I have a simple List of components that renders a title and an simple <hr /> after it.
The list gets rendered correctly and every title has it's corresponding <hr /> except the first one
Here is a screenshot how it looks:
I don't have any custom styles in my project except this one (for a rich text editor called Draft.js:
.editor {
box-sizing: border-box;
border: 1px solid #ddd;
cursor: text;
padding: 16px;
border-radius: 2px;
margin-bottom: 2em;
box-shadow: inset 0px 1px 8px -3px #ababab;
background: #fefefe;
}
.editor :global(.public-DraftEditor-content) {
min-height: 140px;
}
Other then that, no css files.
Here is the code that renders the list (it gets called in the parent for every list item I have):
return (
<div>
<h2>{props.title}</h2>
<p>Test</p>
<hr />
{renderPosts()}
</div>
);
Why is this happening? I played around with it in the dev tools and the missing<hr /> is actually there, but not visible but the styling seems ok. It makes no sense to me because the other hr's are there. Screenshot from the Dev Tools:
I found the problem.
It's another Bootstrap Component that overlapped the first element like #Gonzalo said.
This was the faulty code from the parent component:
return (
<div style={{ marginTop: 50 }}>
{/* TODO: implement AddRoom Component */}
{/* <OverlayTrigger
trigger="focus"
placement="top"
overlay={this.popoverTop()}
>
<Button>
<FontAwesomeIcon icon={faPlus} />
</Button>
</OverlayTrigger> */}
{this.renderRooms()}
</div>
);
I uncommented it and now I see the <hr /> I think now I have to give the OverlayTrigger just a bit margin and I'm guchi.