I have a sample code with one button and 2 images that are shown conditionally. I need to scroll to the top of the content div, where images are shown but it stays in the same position as the previous content.
I tried to separate buttons and content between separate divs but it didn't help. Is there a way to achieve this with only CSS.
Here is the code and working example in codesandbox:
https://codesandbox.io/s/upbeat-sutherland-9r0kh?file=/src/styles.css:0-206
The page:
import { useState } from "react";
import "./styles.css";
export default function App() {
const [isOpen, setIsOpen] = useState(true);
return (
<div className="App">
<div className="buttonContainer">
<button onClick={() => setIsOpen(!isOpen)}>switch</button>
</div>
<div>
{isOpen ? (
<img src="https://images.unsplash.com/photo-1574285013029-29296a71930e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80" />
) : (
<img src="https://images.unsplash.com/photo-1558064340-601a5c6ac442?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
)}
</div>
</div>
);
}
CSS:
.App {
font-family: sans-serif;
text-align: center;
display: flex;
align-items: center;
}
.buttonContainer {
position: fixed;
height: 100vh;
}
button {
position: absolute;
height: 100px;
}
Related
I am making a personal website. The landing page is the first component. The second page is the About component but it is not rendering below the landing component. It is appearing at the top.
App.js file:
import "./App.css";
import Landing from "./components/Landing/Landing";
import About from "./components/About/About";
function App() {
return (
<div className="App">
<Landing/>
<About/>
</div>
);
}
export default App;
**App.css file: **
.App{
display: flex;
flex-direction: column;
}
body{
overflow-x: hidden;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-track{
background: black;
border-radius: 1ex;
}
::-webkit-scrollbar-thumb{
background: #427898;
border-radius: 1ex;
}
::-webkit-scrollbar-corner {
background: black;
}
a{
text-decoration: none;
color: inherit
}
About.jsx file:
import React from 'react'
import css from "./About.module.css"
const About = () => {
return (
<div style={{ color: 'white' }}>About</div>
)
}
export default About
I have already tried creating a container class for About and then changing the display in my About.module.css file but the About text still remains at the top of the page unseen.This is the landing page and as you can see I want the About component to now be below the landing page as you scroll down.
My title component is not getting styled by its css file.
I want it to have a green background.
It is coming up white for some reason.
Here is the Component Js file:
import React from "react";
function Title() {
return (
<div className="Title">
<h1>Welcome to ZXY Gallery</h1>
</div>
);
}
export default Title;
Here is the .Css file:
/* src/Title.css */
title {
box-sizing: border-box;
width: 50%;
display: flex;
justify-content: center;
padding: 1em;
margin-bottom: 2em;
background-color: green;
}
Here is the app.js file:
import React from "react";
// import Split from "react-split";
import SplitPane from "react-split-pane";
import "./App.css";
import Title from "./Title";
import "./Title.css";
function App() {
return (
<div>
<Title />
<SplitPane
split="vertical"
minSize={50}
defaultSize={parseInt(localStorage.getItem("splitPos"), 10)}
onChange={size => localStorage.setItem("splitPos", size)}
>
<div style={{ height: "75%", backgroundColor: "red", border: "5%" }}>
<h1>This Area is Highly Toggleable</h1>
</div>
<div style={{ height: "85%", backgroundColor: "yellow", border: "5%" }}>
<h1>
We love these
<a target="_blank" href="http://chillcastle.com/art">
<h1>Artists</h1>
</a>
They have shown with us in the past.
</h1>
</div>
</SplitPane>
</div>
);
}
export default App;
Does anyone see why I cant get the Title to have for example a green background?
Since you are trying to reference a class, you need to put ".Title" in your css instead of "title".
This question already has an answer here:
How to extend header to the full page width? [duplicate]
(1 answer)
Closed 3 years ago.
How can I extend my header to the full page? I have tried margin-left & right but that doesn't work.
Header.css
.header{
background: green;
height: 70px;
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 25px;
left: 0;
right: 0;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header-right {
float: none;
}
}
Here's my app.tsx file:
const Header = () => (
<div className = 'header'>
<h1>Instaride</h1>
<div className="header-right">
<Button> Sign In</Button>
<Button> Contact</Button>
</div>
</div>
);
export default Header;
I have already tried this too:
body, html{
margin:0;
padding:0;
}
Just add document.body.style.margin = 0; in your component.
Here is your component with MUI way of styling,
import React from "react";
import { makeStyles } from "#material-ui/styles";
import { Button } from "#material-ui/core";
const useStyles = makeStyles({
header: {
background: "green",
height: "70px",
width: "100%",
display: "flex",
justifyContent: "space-between",
marginBottom: "25px",
left: "0",
right: "0"
},
headerRight: {
float: "right",
color: "blue"
}
});
export default function Header() {
document.body.style.margin = 0;
const classes = useStyles();
return (
<div className={classes.header}>
<h1>Instaride</h1>
<div className={classes.headerRight}>
<Button> Sign In</Button>
<Button> Contact</Button>
</div>
</div>
);
}
I've also created sandbox for you: https://codesandbox.io/s/serene-sun-n5rth?fontsize=14&hidenavigation=1&theme=dark
It works perfectly alright for me with whatever code that you have shared - https://react-xukh1h.stackblitz.io
May be you have included some css themes or library which might be intruding whatever that you are trying to achieve.
I want to show different data or hide component if it doesn't fit on screen.
I made a working example but i don't think it's a right/elegant way to do it.
Maybe someone can show me a better way?
This image of example that i made in codepen.
1. I want to hide first red block if it's doesn't fit in grey.
I don't want to do it on media queries of window-size because my red blocks maybe be different in size from user to user.
Codepen example (resize to hide block): https://codepen.io/bofemptiness/pen/YJRKGj
const styled = styled.default
const Component = React.Component;
const DivHat = styled.div`
position: fixed;
top: 0;
width: 100% ;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: blue;
`
const DivProfile = styled.div`
display: flex;
height: 100%;
cursor: pointer;
`
const ExpCooDiv = styled.div`
display: flex;
flex-direction: column;
font-size: 1rem;
`
class App extends Component {
constructor(props) {
super(props)
this.state = { showCookies: true, lvlRefLastSize: 0 }
this.statsRef = React.createRef()
this.cocRef = React.createRef()
this.lvlRef = React.createRef()
this.mediaStats = this.mediaStats.bind(this);
}
componentDidMount() {
// Add listner when window resizes
window.addEventListener('resize', this.mediaStats)
// Activate function at least one time on load
this.mediaStats()
}
componentWillUnmount() {
window.removeEventListener('resize', this.mediaStats)
}
// Show/hide first red block if summ of red blocks widths <= width of grey one
mediaStats = () => {
console.log(this.statsRef.current.scrollWidth)
if (this.lvlRef.current.scrollWidth != 0)
this.setState({ lvlRefLastSize: this.lvlRef.current.scrollWidth })
if (this.statsRef.current.scrollWidth <= this.state.lvlRefLastSize + this.cocRef.current.scrollWidth) {
this.setState({ showCookies: false })
} else {
this.setState({ showCookies: true })
}
}
render () {
return(
<DivHat>
<div>Menu</div>
<div id='test' ref={this.statsRef}>
<div ref={this.lvlRef} id='test2'>
{this.state.showCookies &&
<React.Fragment>
<span>DATA that i hide</span>
</React.Fragment>
}
</div>
<div ref={this.cocRef} id='test2'>
ANOTHER DATA
</div>
</div>
<DivProfile >
<div> Profile </div>
</DivProfile>
</DivHat>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
I have created on modal using HTMl and CSS in react but, modal is not working as expected when deployed on environment as I have set z-index of modal to be higher
But there are other component on page who has also z-index and as those component appears before modal component in html page order.
Model doesn't appear on top as expected.
IS there any way in react, so that we can override all existing z-index and modal will work as expected.
I am providing CSS code for modal overlay and modal
.modal-overlay{
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
z-index: 5;
background-color: rgba(0,0,0,0.3);
overflow: scroll;
}
.modal{
display: flex;
flex-direction: column;
flex-basis: auto;
background-color: #fff;
max-width: 375px;
margin: 0px auto;
}
This method uses React Portal. U should have element with id="modal-root" in ur index html file. Every time u call a modal, the modal will come inside modal-root, Hence there will be no problem of z-index as u r rendering the Modal at the topmost div
Create a file Modal.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const modalRoot = document.getElementById('modal-root');
class Modal extends Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
}
componentDidMount() {
modalRoot.appendChild(this.el);
console.log('Modal did mount');
}
componentWillUnmount() {
console.log('Modal will unmount');
modalRoot.removeChild(this.el);
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
}
export default Modal;
Create actual modal code
import React from 'react';
const ImageContainer = props => (
<div className="modal d-block full-screen-popup" tabIndex="-1" role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h6 className="modal-title text-center bold">Title</h6>
<button type="button" className="close" onClick={props.onClose}>
<span className="icon-close" />
</button>
</div>
<div className="modal-body p-0">
<div className="imageBody text-center">
<img className="img-fluid" src={props.imgSrc} />
</div>
</div>
</div>
</div>
</div>
);
export default ImageContainer;
Its CSS should be
.full-screen-popup {
background-color: rgba(0,0,0,.62);
}
.d-block {
display: block!important;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
outline: 0;
}
Then in any js file, Import the Modal, and pass the actual modal component.
renderImageModal = () => {
if (this.state.showImageModal) {
return (
<Modal>
<ImageContainer onClose={this.handleImageModalClose} imgSrc={this.state.link} />
</Modal>);
}
return null;
}
handleModalOpenClick = () => {
this.setState({
showImageModal: true,
});
}
handleImageModalClose = () => {
this.setState({
showImageModal: false,
});
}
render(){
return(
<button onclick={this.handleModalOpenClick}>Open Modal</button>
{this.renderImageModal()})
}
The best way to create modal using ReactJS is to use Portals.
You can check the docs for portals here in the ReactJS docs or here the particular Modal example on codepen.