I'm currently using the React Bootstrap Modal. I'm trying to center an element within a modal with flexbox, but having a lot of trouble doing just that. Below is my code, and how it currently looks.
import { Modal } from 'react-bootstrap'
import React from 'react';
import { Button } from 'react-bootstrap';
import * as welcome from '../../styles/welcome'
class Welcome extends React.Component{
constructor(props){
super(props)
this.state = {
showModal: true
}
this.close=this.close.bind(this)
this.open=this.open.bind(this)
}
componentWillReceiveProps(nextProps){
debugger
if(nextProps.modal_content !== this.props.modal_content){
this.setState({ showModal: true });
}
}
close(){
this.setState({ showModal: false });
}
open() {
this.setState({ showModal: true });
}
render() {
return (
<div>
<Modal style={welcome.welcomeBody} show={this.state.showModal} onHide={this.close}>
<div style={{display: 'flex', justifyContent: 'center'}}>
<div style={{backgroundColor: 'black', border: '1px solid black', borderRadius: '100%', width: '50px', height: '50px'}}></div>
</div>
</Modal>
</div>
);
}
}
export default Welcome
You are applying flex in the image to align it center...which is wrong...
Flex always be applied to the parent container so that its children items use the flex features.
Wrap your image in a div and then apply display:flex and justify-content:center to that div so that image will be aligned centered.
<div style={{display: 'flex',justifyContent: 'center'}}>
<img src="pic.png"></img>
</div>
<div style="display: flex;justify-content: center;">
<img src="http://via.placeholder.com/350x150">
</div>
Updated Code
<div style="display: flex;justify-content: center;">
<div style="background-color:black;border:1px solid;height:50px;width:50px;border-radius:50%;"></div>
</div>
Related
I am creating an interactive rating card with react. I have 5 divs which represent the number you are rating. When I click on one number I want to change the background of the targeted div to white.
import './App.css';
import React, { useState } from 'react';
function App() {
const [color, setColor] = useState('blue');
const changeColor = () => {
setColor('white');
};
return (
<div className="card">
<div className="container">
<p class="question">How did we do?</p>
<p>
Please let us know how we did with your support request. All feedback
is appreciated to help us improve our offering!
</p>
<div id="numbers">
<div
className="circle"
onClick={setColor}
style={{ backgroundColor: color }}
>
1
</div>
<div
className="circle"
onClick={changeColor}
style={{ backgroundColor: color }}
>
2
</div>
<div className="circle">3</div>
<div className="circle">4</div>
<div className="circle">5</div>
</div>
<button className="btn"> Submit </button>
</div>
</div>
);
}
export default App;
So far I tried to work with an useState hook. I read in some other sources to use the e.target.value or to give every div a special key value. I tried it with both but didn't manage to solve it. At the moment div 1 and div 2 change the color if I click on one of them.
const App = () => {
const [selectedStar, setSelectedStar] = React.useState();
return (
<div>
<div
className={`circle ${selectedStar === 1 && "active"}`}
onClick={() => setSelectedStar(1)}
>
1
</div>
<div
className={`circle ${selectedStar === 2 && "active"}`}
onClick={() => setSelectedStar(2)}
>
2
</div>
<div
className={`circle ${selectedStar === 3 && "active"}`}
onClick={() => setSelectedStar(3)}
>
3
</div>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
.circle {
height: 20px;
width: 20px;
background: blue;
text-align: center;
color: white;
border-radius: 50%;
}
.circle.active {
background: white;
color: black;
}
<script src="https://unpkg.com/react#16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="root"></div>
I have added a modal to display a login pop-up.
My issue is that the Modal itself seems having padding internally which break my user experience.
As you can see below in the image:
Adding a link as I am not able to attached the image. https://photos.app.goo.gl/iJZRZ28o8dQhmJh4A
[enter link description here][1]
and below the code
import React from "react";
import { Modal } from "react-bootstrap";
import '../../assets/styles/Login.css';
class LoginRegisterModal extends React.Component {
constructor(props, context) {
super(props);
this.state = {show: false};
}
....
render() {
const styleModal = {
marginTop: "15%",
marginLeft: "30%",
padding: 0,
width:770,
height:480,
backgroundColor:"#ffffffff",
borderRadius:21.5,
}
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add('right-panel-active');
});
signInButton.addEventListener('click', () => {
container.classList.remove('right-panel-active');
});
return (
<Modal show={this.state.show} style={styleModal} >
<div class="container" id="container">
<div>
.....
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Sign in.</h1>
<p>
Nice to see you again.Login and continue the journey.
</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hey, new friend!</h1>
<p>New to the Village? Sign up and start your journey</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
</Modal>
);
}
}
export default LoginRegisterModal;```
I have tried to remove all my containers and just display a simple text using `<p> test </p>` and I am facing the same issue. The `marginTop` and `marginLeft` defined in the style allowed my to move the Modal from the top left corner.
Any idea why I have some margin inside the modal ?
[1]: https://photos.app.goo.gl/iJZRZ28o8dQhmJh4A
I have this code in which the hover selector doesn't work at all. Everything else when it comes to style works perfectly but the hover doesn't do anything visible.
import React from "react";
import Paper from '#material-ui/core/Paper';
import Grid from '#material-ui/core/Grid';
const styles = {
divStyle: {
width: "300px",
height: "200px",
backgroundColor: "red",
margin: "30px",
'&:hover': {
border: '5px solid #000000',
bordeBottomColor: 'transparent',
borderRightColor: 'transparent'
}
}
};
const StartPage = ()=> {
return(
<React.Fragment>
<Paper>
<div style={styles.firstContainer}>
</div>
<div style={styles.secondContainer}>
<Grid container >
<Grid style={styles.Grid} item>
<div style={styles.gridDivStyle}>
<div style={styles.divStyle}></div>
<div style={styles.divStyle}></div>
</div>
<div style={styles.gridDivStyle}>
<div style={styles.divStyle}></div>
<div style={styles.divStyle}></div>
</div>
</Grid>
</Grid>
</div>
<div style={styles.lastContainer}>
</div>
</Paper>
</React.Fragment>
);
}
export default StartPage;
How can I make the hover selector work. Do I need to use the state from React in order to make the change?
if you want to use hover style , you can use the package
import { withStyles } from 'material-ui/styles';
Here is the code:
import React from "react";
import Paper from "#material-ui/core/Paper";
import Grid from "#material-ui/core/Grid";
import { withStyles } from "#material-ui/styles";
const styles = {
divStyle: {
width: "300px",
height: "200px",
backgroundColor: "red",
margin: "30px",
"&:hover": {
border: "5px solid #000000",
bordeBottomColor: "transparent",
borderRightColor: "transparent"
}
}
};
const StartPage = props => {
return (
<React.Fragment>
<Paper>
<div style={styles.firstContainer} />
<div style={styles.secondContainer}>
<Grid container>
<Grid style={styles.Grid} item>
<div style={styles.gridDivStyle}>
<div className={props.classes.divStyle} /> // use the styles through className
<div className={props.classes.divStyle} />
</div>
<div style={styles.gridDivStyle}>
<div className={props.classes.divStyle} />
<div className={props.classes.divStyle} />
</div>
</Grid>
</Grid>
</div>
<div style={styles.lastContainer} />
</Paper>
</React.Fragment>
);
};
export default withStyles(styles)(StartPage);
Working Demo
So I'm trying to create a navigational menu header and it also includes a logo in it, fairly simple but some of the buttons the left side are inline-block with the logo itself and they appear at the bottom of the logo, to the right of it based on ordering, but at the bottom and im not sure how with css to get them to go to the top of the container or if the roof of their container is just lower that I'm thinking?
import React from 'react';
import {Link} from 'react-router-dom';
import { AuthService } from './backend/client/auth';
import { Paper, Button } from '#material-ui/core';
import { withStyles } from '#material-ui/core/styles';
const styles = theme => ({
container: {
'height': 128,
},
leftnav: {
'display': 'inline-block',
},
rightnav: {
'float': 'right',
},
button: {
'display': 'inline-block',
}
});
class Header extends React.Component {
render() {
const { classes } = this.props;
return (
<Paper className={classes.container}>
<div className={classes.leftnav}>
<Link to="/" className={classes.button}>
<img src="https://imageserver.eveonline.com/Corporation/98523546_128.png" alt="Hole Puncher's Logo"></img>
</Link>
<Button component={Link} to="/">
Home
</Button>
<Button component={Link} to="/store">
Browse
</Button>
<Button component={Link} to="/contact-us">
Contact Us
</Button>
</div>
<div className={classes.rightnav}>
{AuthService.isAuthed()
? <Button component={Link} to="/account/orders">Account</Button>
: ''}
{AuthService.isAuthed()
? <Button component={Link} to="/login">Login</Button>
: <Button onClick={AuthService.logout} component={Link} to="/login"></Button>}
</div>
</Paper>
)
}
}
export default withStyles(styles)(Header);
https://i.imgur.com/OnTjO4l.png
Multiple ways to solve it using CSS. Simplest way is to use vertical-align: top in your button class. I would however recommend you look into display: flex. It's much easier for vertical alignment.
Working JSFiddle here: http://jsfiddle.net/Lhefbudx/
Hope this helps.
I need to be able to hide components that gets wrapped because it goes over the max width.
<div style={{width:100}}>
<div style={{width:50}}>
component1
</div>
<div style={{width:50}}>
component2
</div>
<div style={{width:50}}>
component3
</div>
</div>
//But I actually use map to render children
<div style={{width:100}}>
{components.map((item, index) => {
return <div style={{width:50}}>component{index + 1}</div>)
}}
</div>
as shown in the code above, the parent div is of with 100. So the last component (component3) would go over the width of the parent by 50px and will be rendered in the second line. However, I want any component that leaves the first line to be not rendered at all. How do I make sure that only component1 and component2 shows and excludes component3?
You could add up the widths of all the components in a separate variable, and render null for all components remaining after the total width of those already rendered exceeds 100.
Example
class App extends React.Component {
state = {
components: [{ width: 50 }, { width: 50 }, { width: 50 }]
};
render() {
const { components } = this.state;
let totalWidth = 0;
return (
<div style={{ width: 100 }}>
{components.map((item, index) => {
totalWidth += item.width;
if (totalWidth > 100) {
return null;
}
return (
<div key={index} style={{ width: 50 }}>
component{index + 1}
</div>
);
})}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>