How to fix position of one element in a flexbox? - javascript

I have 2 boxes: Panel and Sidebar, in a flexbox, with flex-direction: row and justify-content: space-between I am able to horizontally align them side by side with a gap in the middle.
Now I'd like to fix the right Sidebar position, i.e. when scrolling down, the Sidebar should always stay on top of the screen, regardless of the location of Panel. How can I do it with CSS?
Working example here: https://codesandbox.io/s/gallant-saha-zgmnw
Code here:
App.js:
import React from "react";
import "./App.scss";
import Panel from "./Panel";
import Sidebar from "./Sidebar";
export default function App() {
return (
<div className="App">
<Panel />
<Sidebar />
</div>
);
}
App.scss:
.App {
width: 1100px;
font-family: sans-serif;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
Panel.js:
import React from "react";
import "./Panel.scss";
const Panel = () => {
return (
<>
<div className="panel">The main panel</div>
</>
);
};
export default Panel;
Sidebar.js:
import React from "react";
import "./Sidebar.scss";
const Sidebar = () => {
return (
<>
<div className="sidebar">The sidebar</div>
</>
);
};
export default Sidebar;

I modified your siderbar css.
I used position fixed as this will make the sidebar fixed in the viewport so as you scroll it will remain static.
.sidebar {
position: fixed; /* add this */
width: 200px;
height: 200px;
text-align: center;
border: 1px black solid;
left: 906px /* add this */
}
This produces the desired effect. Tested and works. Apologies, I have updated my answer.

add this css to .sidebar
position:fixed;
right: 10px;
also, you can add:
top: -- px
if you have Navbar.

Related

Why is my Swiper render buggy at the first time render using React

I'm using React and trying to fetch some of my anime into the home banner using Swiper
I don't know why when I refresh my page, it'll only render at half of the swiper.
Here's how it display:
However, if I press the next or back button, it'll display normally again.
Here's my code in my Home Component:
import { useState, useEffect } from "react"
import ReactHlsPlayer from 'react-hls-player';
import './home.css'
import { supabase } from '../../supabaseClient'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Pagination,Navigation } from 'swiper';
import 'swiper/css'
SwiperCore.use([Pagination,Navigation]);
function Home(){
useEffect(async ()=>{
fetchAnime()
}, [])
const [animeDetail, setAnimeDetail] = useState([])
async function fetchAnime() {
const { data } = await supabase
.from ('anime')
.select ()
setAnimeDetail(data)
}
return (
<>
<div className="spacer">
</div>
<div className="home-section">
<h2>Home Page</h2>
<Swiper
centeredSlides={true}
slidesPerView={7}
spaceBetween={10}
loop={true}
pagination={false}
navigation={true} className="mySwiper">
{animeDetail.map((element, i)=>
(
<SwiperSlide key = {i}><img src={element.anime_image}/></SwiperSlide>
)
)}
</Swiper>
</div>
</>
)
}
export default Home
And here's my Home CSS, sorry if it's a bit messy, I'm still trying it here and there, but I'm stuck.
.swiper {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-wrapper{
width: 100%
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
max-width: 280px;
}
.swiper-slide img {
display: block;
box-sizing: border-box;
border: none;
max-height: 350px;
min-height: 350px;
-o-object-fit: cover;
object-fit: cover;
transition: all .3s ease;
opacity: 0.5
}
.swiper-slide-active {
transform: scale(1.2);
z-index: 2
}
.swiper-slide-active img{
transition: all .3 ease;
opacity: 1
}
And if someone figures it out, please help me a bit, I tried to whenever the item in the middle is in active, it'll pop out bigger, but I can't do it with transform: scale(number) - I have tried it (It does get bigger when it's active but it doesn't display bigger at the height, I haven't figured it out some ways at the moment)
you have to set the initialSlide prop on the Swiper element to an index of the slide in the middle. so that the slider starts from there.
Also in this case, you can set the centeredSlides prop to true as the active slide remains in the middle.
Here's a possible fix for your issue and for everyone else that comes here looking for answers.
Use conditional rendering of the Swiper component, something like this:
{animeDetail.length>0 && <Swiper
centeredSlides={true}
slidesPerView={7}
spaceBetween={10}
loop={true}
pagination={false}
navigation={true} className="mySwiper">
{animeDetail.map((element, i)=>
(
<SwiperSlide key = {i}><img src={element.anime_image}/></SwiperSlide>
)
)}
</Swiper>}

Using router link on a div in react

Can anyone help me incorporate routing in my project? I am trying to route to a different page when a div is clicked but for some reason the div does not show up unless you put something in it(the text "Card") and also not how I styled it in my stylesheet.
The div is inside a component I did not fully finish making yet, but essentially when you click on this parent div it takes you to a different page.
The code in the main App component is this:
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import { Link } from 'react-router-dom'
import NAVBAR from './components/NAVBAR.js';
import CARD from './components/CARD.js'
import CONTENTS from './components/CONTENTS.js'
import './App.css'
import HOME_PAGE from './components/pages/HOME_PAGE.js';
function App() {
return (
<>
<body>
<header>
<NAVBAR />
</header>
<div className = "info-container">
<div className="cards-container">
<Link to = "/components/pages/HOME_PAGE.js"><CARD id = "pendulum"/></Link>
</div>
<CONTENTS />
</div>
<Router>
<Switch>
<Route exact path = "/components/pages/HOME_PAGE.js" component = {HOME_PAGE}/>
</Switch>
</Router>
</body>
</>
);
}
export default App;
The code of the div components(CARD) is this:
import React from 'react'
import './card.css'
import { Link } from 'react-router-dom'
export default function CARD({ id }) {
return (
<>
<div className = "card-container">
</div>
</>
)
}
I basically wrapped the div components(CARD) with a Link tag and pointed it towards the page I want it to render. But the div just does not appear(It does appear if put some text inside the Link tags but also not how I styled the div). The styles are simple but it might be a styling issue so here are the styles:
card.css:
.card-container{
height: 47.1%;
width: 100%;
background-image: linear-gradient(to right, #0c0624, #0c0625, #0b0726, #0b0727, #0a0828, #090d2b, #08112e, #071531, #071b36, #07213b, #082740, #0b2d45);
border-radius: 15px;
margin-bottom: 20px;
}
App.css:
*, *::before, *::after{
box-sizing: border-box;
}
body{
margin: 0;
overflow: none;
background-image: linear-gradient(to left top, #3e000b, #39030a, #330508, #2e0607, #290606, #270505, #260505, #240404, #250303, #260203, #260102, #270002);
}
.info-container{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-self: center;
height: 90vh;
width: 100%;
padding: 12px;
position: relative;
overflow: hidden;
scroll-behavior: smooth;
}
.cards-container{
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 5px;
margin: 10px 0px 0px 0px;
border-radius: 15px;
overflow: scroll;
}
If i get you right, you can't wrap a div with a Link what you must know is that a react-router-dom Link component is just a regular html a tag. What you can essentially do to get this to work is to use the react-router-dom useHistory() hook and push or replace the history on your single page application. How you can do it?
In your Card component, which is the component yiu are trying to click and navigate you somewhere do this
import React from 'react'
import './card.css'
import { useHistory } from 'react-router-dom'
export default function CARD({ id }) {
const history = useHistory()
const navigate =() => history.push('/components/pages/HOME_PAGE.js' )
return (
<div className = "card-container" onClick={navigate} >
</div>
)
}
I hope you get the idea
Little addition, I'm just learning react it's probably not the best solution but it seems to work for me.
Exactly you can use history.push to do everything, for example history.push(path/${id}). Hope you get the idea
---> reply
function TourItem({ currentItems }) {
const [itemId, setItemId] = useState();
useEffect(()=>{
if (itemId) {
history.push(`/tour-detail/${itemId}`);
}
}, [itemId]);
return (
<div className={cx("wrapper")}>
{currentItems && currentItems.map(item => (
<div key={item.id} className={cx("item")} onClick={()=>setItemId(item.id)}>
<div className={cx("inner")}>
<div className={cx("image")}>
<img src={item.images[0]} alt={item.tourName} />
</div>
<div className={cx("meta")}>
<h4 className={cx("tour-name")}>
<Link to={`/tour-detail/${item.id}`}>{item.tourName}</Link>
</h4>
<p>Khởi hành từ: <span>{item.departureFrom}</span></p>
<p>Thời gian: <span>{item.time}</span></p>
<p>Giá từ: <span><FormatPrice>{item.price}</FormatPrice> VNĐ</span></p>
</div>
</div>
</div>
))}
</div>
);
}

Use styled-components to center React Bootstrap Modal

Is it possible to use styled-component to create a wrapper container containing React Bootstrap's Modal component in order to make the modal be both horizontally and vertically aligned?
Tried creating CenteredModal container as shown, but the .modal element does not appear to have the new styles applied to it.
import { Modal } from "react-bootstrap";
import styled from 'styled-components';
const CenteredModal = styled.div`
& .modal {
display: flex !important;
align-items: center;
}
`
interface MyModalProps {
isOpen: boolean,
onHide: () => void
}
export default function MyModal({
isOpen = false,
onHide,
}: MyModalProps) {
return (
<CenteredModal>
<Modal show={isOpen} onHide={onHide}>
<h1>Hello</h1>
</Modal>
</CenteredModal>
)
}
Because Modal of react-bootstrap isn't render inside CenteredModal, so your style can't affect it (You can open the browser developer tool to see, it should be rendered at the bottom of the html body not in the CenteredModal div element).
I saw react-bootstrap is already provides a centering method, is this what you want? you can take a look https://react-bootstrap.github.io/components/modal/
why not use centered prop ?
example :
<Modal
size="lg"
centered
>
Your new container just needs a little tweaking:
const CenteredModal = styled.div`
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
`
You can use this syntax:
import { Modal } from "react-bootstrap";
import styled from 'styled-components';
const CenteredModal = styled(Modal)`
display: flex !important;
align-items: center;
`;

How do I separate react js cards?

I want to separate them and line up horizontally and vertically
import React from 'react'
import "./Projects.css";
import { Link } from 'react-router-dom';
function Projects({projectsData}) {
return (
<>
{projectsData.map((index)=>{
const{img,link,title}=index
return(
<div className="_div_">
<div className="cards_">
<div className="_imag">
<img src={img}/>
<div className="_writings">
<h1>{title}</h1>
<a href={link}> See Project</a>
</div>
</div>
</div>
</div>
)
})}
</>
)
}
export default Projects
._div_{
background-color: #fff;
height: 100vh;
width: 100%;
/* To adjust the height as well */
height: fit-content;
}
._imag{
height: auto;
width: 20%;
background-color: rgb(183, 183, 204);
border-radius: 9px;
}
._imag img{
margin-top:0px;
border-radius: 7px;
}
._writings{
height: 40%;
}
.cards_{
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
}
import React from 'react'
import BodySection from "../Navbar/BodySection"
import Navbar from "../Navbar/Navbar"
import Content from "../Navbar/Content"
import {Data1,projectsData} from "./Data"
import Projects from "../Navbar/Projects"
function Home() {
return (
<>
<BodySection/>
<Content{...Data1}/>
<Projects projectsData={projectsData}/>
</>
)
}
export default Home
I want to separate the cards and put them horizontally and vertically and not just vertically.
thank you.
Please ignore what I am about to write because it wont let me post this saying I need to add more details but I dont have more details to add.
The top level should be the flex into which you map the cards, something like this:
function Projects({ projectsData }) {
return (
<div className="_div_">
<div className="cards_">
{projectsData.map((index) => {
const { img, link, title } = index;
return (
<div className="_imag">
<img src={img} />
<div className="_writings">
<h1>{title}</h1>
<a href={link}> See Project</a>
</div>
</div>
);
})}
</div>
</div>
);
}
You should probably have a card element together with these properties on cards_ to position them better:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
This is a perfect use case for css flexbox. I threw together a quick codesandbox for you.
You can use my code as a starting point and expand out to your use case.
If you need a quick intro to flexbox here's a great video.

Place text at the bottom of a div in React

How can I place text at the bottom of a div in plain old React (not React Native)?
In html, you can place text at the bottom of a div by using
vertical-align: text-bottom;
In React Native, it looks like you place text at the bottom of a div by using
textAlignVertical: "bottom",
Is there a simple way to place text at the bottom of a div in plain old React?
The only method I got to work so far is is to use Flexbox.
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
display: "flex",
justifyContent: "flex-end",
alignItems: "flex-end",
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Codesandbox
Edit: This is a simplified example. What I really need is a div with items in several different spots, and text on the bottom.
Edit: In both HTML and React, vertical-align: text-bottom; does not move text to the bottom of a div. It only shifts the text down a little bit to the bottom of where the text would normally be. So in both HTML and React, it can be used to shift text down a little for a subscript. But in both HTML and React, it can't be used to shift text way down to the bottom of a div.
You could use margin:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
marginTop: 'auto'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
Or align-self:
import React from "react";
import "./styles.css";
export default function App() {
const style3 = {
height: "75px",
alignSelf: 'flex-end'
};
return (
<div className="App">
<div style={style3}>CSS Flexbox</div>
</div>
);
}
I noticed you mentioned the div has lots of other information in a more complicated example. I would highly recommend trying out css grid if you haven't already. It allows you to structure the items on your screen very easily.
Here's an example using grid to create the 'holy grail layout' which is by no means the best example but it shows how easy it is to structure divs in different areas of the screen.
https://codepen.io/frazermg/pen/bXbXOR?editors=1100
.container {
display: grid;
grid-template-areas: 'header header header header'
'left content content right'
'left content content right'
'footer footer footer footer';
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(30vh, auto);
}
.header {
background-color: blue;
grid-area: header;
}
.left {
background-color: green;
grid-area: left;
}
.content {
background-color: #eee;
grid-area: content;
}
.right {
background-color: pink;
grid-area: right;
}
.footer {
background-color: orange;
grid-area: footer;
}
<div class="container">
<div class="header"></div>
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
<div class="footer"></div>
</div>
Here is an example of nested grids:
https://codepen.io/frazermg/pen/ZgEwVd
This website is very useful for all things css, especially flexbox and grid.
https://css-tricks.com/snippets/css/complete-guide-grid/
I hope this can help you!
What about simply style any span or component with text inside a div like this:
... style={{position:"absolute",bottom:"0px"}} ...

Categories