My sidebar in the responsive mode not working correctly, i'm use #media for controller width of page, when is responsive i use position:absolute for sidebar button stay in up of content, i created a state for onclick is active change this position:relative but is not working, help please. The page in the mode normal funciton correctly, and mode responsive (Ctrl + shift + I) too but i click in the button the problemn happens.
Sidebar.js
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
classStyle: "sidebar"
};
}
// handleSidebar(value) {
// this.setState = ({ classStyle : value });
// }
handleSidebar = (value) => {
this.setState = ({ classStyle: value });
}
render() {
return (
<div className={this.state.classStyle}>
<Navbar bg="light" variant="light" sticky="top" expand="lg">
<Navbar.Toggle aria-controls="navbarSupportedContent" onClick={() => handleSidebar("sidebarR")} />
<Navbar.Collapse id="navbarSupportedContent">
Index.css
#media (max-width: 600px)
{
.sidebar
{
position: absolute;
}
.sidebarR
{
position: relative;
}
}
Please try this one, it is working
Replace this function in your component
handleSidebar = () => {
console.log("clicked");
this.setState({ classStyle: "sidebarR" });
}
If you want toggle class then use below function,
handleSidebar = () => {
console.log("clicked");
const classStyle = this.state.classStyle == "sidebar" ? "sidebarR" : "sidebar";
this.setState({ classStyle: classStyle });
}
Running Component without Navbar Component,
import React,{Component} from 'react';
import './Menu.css';
export default class Menu extends Component {
state = {
classStyle: "sidebar"
};
handleSidebar = () => {
console.log("clicked");
this.setState({ classStyle: "sidebarR" });
}
render() {
return (
<div className={this.state.classStyle}>
<p onClick={() => this.handleSidebar()} >Menu</p>
</div>
)
}
}
When you call handleSidebar on onClick, you need to use this
Navbar.Toggle aria-controls="navbarSupportedContent" onClick={() => this.handleSidebar("sidebarR")} />
Related
I have made a draggable split panel by https://github.com/johnwalley/allotment.
I would like to make the background of the pane below green. But after dragging the split, the background color is not systematically updated in that area.
Does anyone know how to amend the code to achieve that?
https://codesandbox.io/s/reset-forked-rfifun?file=/src/App.js
import React from "react";
import { Allotment } from "allotment";
import "allotment/dist/style.css";
import styles from "./App.module.css";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
toExpand: true
};
this.myRef = React.createRef();
}
handleChange = (sizes) => {
if (sizes.length > 1) {
if (sizes[1] < 31) {
this.setState({ toExpand: true });
} else {
this.setState({ toExpand: false });
}
}
};
render() {
return (
<div>
<div className={styles.container}>
<Allotment vertical onChange={this.handleChange} ref={this.myRef}>
<Allotment.Pane>Main Area</Allotment.Pane>
<Allotment.Pane preferredSize="0%">
<div
style={{ backgroundColor: "green" }}
onClick={() => {
if (this.state.toExpand) {
this.myRef.current.resize([50, 50]);
} else {
this.myRef.current.resize([10000, 0]);
}
}}
>
Console
{this.state.toExpand ? "ArrowUp" : "ArrowDown"}
</div>
</Allotment.Pane>
</Allotment>
</div>
</div>
);
}
}
It seems that the content div can be set to take full height of the panel:
Forked demo with modification: codesandbox
<Allotment.Pane preferredSize="0%">
<div
// 👇 Set the content div to take full height
style={{ backgroundColor: "green", height: "100%" }}
onClick={() => {
if (this.state.toExpand) {
this.myRef.current.resize([50, 50]);
} else {
this.myRef.current.resize([10000, 0]);
}
}}
>
Console
{this.state.toExpand ? "ArrowUp" : "ArrowDown"}
</div>
</Allotment.Pane>;
I want to make the line underneath 'Search' and the arrow on the right white but I can't figure out how to do it for the life of me. I've tried using styled on the .MuiAutocomplete-root css class but it didn't work. I can't figure out which CSS class to apply the color to. If I inspect it, it says that the class is MuiInput-root which I also tried with styled and that didn't work either.
Thanks
My code (copy pasted from the docs with some minor adjustments):
function sleep(delay = 0) {
return new Promise((resolve) => {
setTimeout(resolve, delay);
});
}
export default function AutocompleteSearch() {
const [open, setOpen] = useState(false);
const [options, setOptions] = useState([]);
const loading = open && options.length === 0;
useEffect(() => {
let active = true;
if (!loading) {
return undefined;
}
(async () => {
await sleep(1e3); // For demo purposes.
if (active) {
//api call then setOptions
}
})();
return () => {
active = false;
};
}, [loading]);
useEffect(() => {
if (!open) {
setOptions([]);
}
}, [open]);
return (
<Autocomplete
id="size-small-standard"
size="small"
sx={{
width: 300,
}}
open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
groupBy={(option) => option.type}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Search"
//makes label white
InputLabelProps={{
style: {color: '#fff'},
}}
InputProps={{
...params.InputProps,
//makes the selected option white when added to the box
sx: {color: '#fff'},
endAdornment: (
<>
{loading ? <CircularProgress color="inherit" size={20}/> : null}
{params.InputProps.endAdornment}
</>
),
}}
/>
)}
/>
);
}
Add color to the following CSS classes.
.MuiSvgIcon-root {
color: white;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:before {
border-bottom-color: white !important;
}
.css-ghsjzk-MuiInputBase-root-MuiInput-root:after {
border-bottom-color: white !important;
}
Play around with the code here
I used red color in my codesandbox example so that it can be visible on white screen
With the help of the community, I have been able to final have my modal pop-up working on my reat website.
The modal code is as below:
import React from "react";
import '../../assets/styles/GenericTheme.css'
import { Modal, Button } from "react-bootstrap";
class LoginRegisterModal extends React.Component {
constructor(props, context) {
super(props);
this.state = {show: false};
}
open = () => {
this.setState({show: true});
}
close = () => {
this.setState({show: false});
}
componentDidUpdate(prevProps) {
const { show } = this.props;
if (prevProps.show !== show) {
if (show) {
this.open(); // open if parent says to
} else {
this.close(); // close if parent says to
}
}
}
render() {
const styleModal = {
width:770,
height:480,
backgroundColor:"#ffffffff",
borderRadius:21.5,
boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
}
return (
<Modal show={this.state.show} style={styleModal} >
<Modal.Body>test</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={this.close}>
Close
</Button>
</Modal.Footer>
</Modal>
);
}
}
export default LoginRegisterModal;
The modal is called by the react-bootstrap Navs components:
const menuLoginRegister = <Nav.Link ref="LoginRegisterModal" eventKey={1} href="#" onClick={this.openLogin}>{TextContents.MenuLoginRegister}</Nav.Link>;
And I have added the modal in the return function like below:
return (
<div>
<Navbar className="village-header" width="100" expand="lg">
....
</Navbar>
<LoginRegisterModal show={this.state.showLogin}
onHide={() => this.setState({ showLogin: false })}/>
</div>
);
The only issues is that the modal keep being displayed on the top left corner and not centered in the screen.
I tried to use a center in the style but it still not move it to the center.
Any idea how to do it ?
Thanks
I have a separate App.css file that has global css attributes and have classes for responsiveness. The issue is I want to render elements differently for separate devices but can't seem to figure out how to do that as using conditionals isn't applying as such.
import UserItem from "./UserItem";
import Spinner from "../layout/Spinner";
import PropTypes from "prop-types";
const Users = ({ users, loading }) => {
if (loading) {
return <Spinner />;
} else {
return (
<div style={userStyle} className='body'>
{users.map((user) => {
return <UserItem key={user.id} user={user} />;
})}
</div>
);
}
};
const windowWidth = window.innerWidth;
Users.propTypes = {
users: PropTypes.array.isRequired,
loading: PropTypes.bool.isRequired,
};
const userStyle = {
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
gridGap: "1rem",
};
export default Users;
My css #media query which I am trying to apply to effect change on a small device.
/* Mobile Styles */
#media (max-width: 700px) {
.hide-sm {
display: none;
}
}
How do I implement this #media css style so that it can render the page differents through jsx?
You can use material ui. that will fulfil your requirement. Please check this example:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Typography from '#material-ui/core/Typography';
import { green } from '#material-ui/core/colors';
const useStyles = makeStyles(theme => ({
root: {
padding: theme.spacing(1),
[theme.breakpoints.down('sm')]: {
backgroundColor: theme.palette.secondary.main,
},
[theme.breakpoints.up('md')]: {
backgroundColor: theme.palette.primary.main,
},
[theme.breakpoints.up('lg')]: {
backgroundColor: green[500],
},
},
}));
export default function MediaQuery() {
const classes = useStyles();
return (
<div className={classes.root}>
<Typography variant="subtitle1">{'down(sm): red'}</Typography>
<Typography variant="subtitle1">{'up(md): blue'}</Typography>
<Typography variant="subtitle1">{'up(lg): green'}</Typography>
</div>
);
}
Material UI
You can use following example too.
class Card extends Component {
constructor() {
super();
this.mediaQuery = {
desktop: 1200,
tablet: 768,
phone: 576,
};
this.state = {
windowWidth: null
};
}
componentDidMount() {
window.addEventListener('resize', () => {
this.setState({windowWidth: document.body.clientWidth})
});
}
render() {
return (
<div style={{
width: this.state.windowWidth > this.mediaQuery.phone
? '50%'
: '100%',
//more styling :)
}}>
<!-- <Card> contents -->
</div>
);
}
}
Source
I suggest that use CSS #media query to make responsive layouts.
But if you insist on implement with JS and React you should get windowWidth after component mounted. You can use useEffect hook to do so and save value in a state:
const [windowWidth, setWindowWidth] = useState('');
useEffect(() => {
setWindowWidth(window.innerWidth) // or better one -> window.clientWidth
});
I have an issue in my react application. I'm using styled-components for using styling (CSS-in-JS).
The issue:
When the user performs a specific action, a layer over the complete page should be displayed. I've created for this an seperate component. But the layer is not working as expected (see the image). Layer 1 should cover the complete page. Layer 2 should be in the middle of the page.
See my code of the component:
import React, { Component, Fragment } from 'react';
import styled from 'styled-components';
import axios from 'axios';
const uuidv4 = require('uuid/v4');
const RefreshLink = styled.a`
text-decoration: underline;
cursor: pointer;
color: #155724;
&:hover {
color: #155724;
}
`
const Background = styled.div`
position:fixed;
width:100%;
height:100%;
background-color:#aeaeae;
opacity:0.5;
z-index:10000;
`
const PopUp = styled.div`
position:fixed;
z-index:10001;
left:50%;
margin-left:-25%;
width:450px;
top:50%;
margin-top:-25%;
`
class UpdatingFreightsInfo extends Component {
_isMounted = false;
signal = axios.CancelToken.source();
constructor(props) {
super(props);
this.state = {
freightsInUpdateProcess: false,
hasFreightsBeenInUpdateStatusSincePageLoad: false,
intervalId: -1,
freightsUpdating: [],
};
this.checkForUpdatingFreights = this.checkForUpdatingFreights.bind(this);
}
componentDidMount() {
this._isMounted = true;
this.getUpdatingFreightsInfo();
}
componentWillUnmount() {
this.signal.cancel();
clearInterval(this.state.intervalId);
this._isMounted = false;
}
componentDidUpdate(prevProps) {
if (this.props.updateTrigger !== prevProps.updateTrigger) {
this.checkForUpdatingFreights();
}
}
getUpdatingFreightsInfo() {
this.checkForUpdatingFreights();
let intervalId = setInterval(() => {
this.checkForUpdatingFreights();
},30000);
this.setState({
intervalId: intervalId
});
}
checkForUpdatingFreights = async () => {
try {
const response = await axios.get('../data/get/json/freightsCurrentlyUpdating', {
cancelToken: this.signal.token,
})
.then((response) => {
console.log(response);
if(response != undefined && response != null) {
if (this._isMounted) {
if(response.data.length > 0) {
this.setState({
freightsUpdating: response.data,
freightsInUpdateProcess: true,
hasFreightsBeenInUpdateStatusSincePageLoad: true,
});
}
else {
this.setState({
freightsUpdating: [],
freightsInUpdateProcess: false,
});
}
}
}
})
.catch(function (error) {
console.log(error);
});
}
catch(err) {
if (axios.isCancel(err)) {
console.log('Error: ', err.message); // => prints: Api is being canceled
} else {
}
}
}
render() {
return (
(this.state.freightsInUpdateProcess || (this.state.hasFreightsBeenInUpdateStatusSincePageLoad && !this.state.freightsInUpdateProcess )) &&
<Fragment>
<Background key={uuidv4()}></Background>
<PopUp key={uuidv4()}>
<div className="container-fluid">
<div className="row">
<div className="col-12 col-sm-12 col-md-12 col-lg-12">
{
this.state.freightsInUpdateProcess &&
<div className="alert alert-warning text-center" role="alert">
<h4 className="alert-heading">Updating freights in process</h4>
<p className="mb-0">{ this.state.freightsUpdating.length } freight entries are currently being updated.</p>
</div>
}
{
this.state.hasFreightsBeenInUpdateStatusSincePageLoad && !this.state.freightsInUpdateProcess &&
<div className="alert alert-success text-center" role="alert">
<h4 className="alert-heading">Updating freights finished</h4>
<p className="mb-0">
The update process has been finished.
<br />
<span className="fa fa-refresh"></span> <RefreshLink href="/" target="_self">Please refresh the page</RefreshLink>
</p>
</div>
}
</div>
</div>
</div>
</PopUp>
</Fragment>
);
}
}
export default UpdatingFreightsInfo;
Is it because the component is being nested in other components? It seems like that, but I thought, when using CSS
position: fixed with combination of left and top
that this code is independent from the components. And also strange that in PopUp it seems to work (almost) correctly.