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
Related
I am having a modal with button inside. Unfortunatly, it's not properly working. During the build I got an error : TypeError: Cannot read property 'addEventListener' of null
Below is 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};
}
componentDidMount(){
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');
});
}
....
render() {
const styleModal = {
marginTop: "15%",
marginLeft: "30%",
padding: 0,
width:770,
height:480,
backgroundColor:"#ffffffff",
borderRadius:21.5,
}
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 adding a if condition before the addListener but it's just fixing the error but not working.
Also I have tried to replace by onClick instead but it's not working the code
signUpButton = () => {
container.classList.add('right-panel-active');
}
but container is not known..
Any idea?
Thanks
Your code should be inside component did mount method componentDidMount(). That's because when you look for a element with id "signUp" it doesn't exist yet. I don't encourage you to do what you are doing. A better approach would be <button onClick={myMethod}>
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'm pretty new to Reactjs world and I have wrote component that I would love to make beautiful with CSS :)
I have component consisted of few buttons and boxes which would be displayed after button is clicked.
class Days extends React.Component {
constructor(props) {
super(props);
this.state = { showComponent: "Box1" };
}
toggleDiv = name => {
if (name === "monday") {
this.setState({
showComponent: "Box1"
});
} else if (name === "thursday") {
this.setState({
showComponent: "Box2"
});
}
};
render() {
return (
<div>
<button onClick={() => this.toggleDiv("monday")}>
<div className="botun">Monday</div>
</button>
{this.state.showComponent === "Box1" && <Box1 />}
<button onClick={() => this.toggleDiv("thursday")}>
<div className="botun">Thursday</div>
</button>
{this.state.showComponent === "Box2" && <Box2 />}
</div>
);
}
}
class Box1 extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col">
<h1>BOx1</h1>
</div>
</div>
</div>
);
}
}
class Box2 extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col">
<h1>Box2</h1>
</div>
</div>
</div>
);
}
}
After button1 is clicked belonging boxes will be shown under.
So my question is how to put all buttons and boxes into one container and style it like in screenshot?
If I include it in my landingpage.js like this
<div className="container">
<div className="row">
<Days />
</div>
</div>
How can I still make my buttons be in one line?
I am not sure how to approach this with CSS.
What is the best practice when using CSS and CSS frameworks with ReactJS?
I am using global style.css and Boostrap.
You should wrap all your buttons inside a single div, give the container a single class, give it's children a modifier class when they are active and if you want to animate the display of the boxes then you shouldn't unmount them when another button is active opting for making them invisible or something like that because otherwise it's kinda difficult to not have React just pop them into existence.
I use inline style tags. It's really a personal preference situation. As you try new things you'll discover the practice that's best for you and for individual projects. An inline style tag looks like this.<div style={{ display: 'flex', width: '100%', backgroundColor: 'red' }}></div> the benefit to this is you can keep styles defined in the component.
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>
I have a react element that has an inline style like this: (Shortened version)
<div className='progress-bar'
role='progressbar'
style={{width: '30%'}}>
</div>
I want to replace the width with a property from my state, although I'm not quite sure how to do it.
I tried:
<div className='progress-bar'
role='progressbar'
style={{{width: this.state.percentage}}}>
</div>
Is this even possible?
You can do it like this
style={ { width: `${ this.state.percentage }%` } }
Example
yes its possible check below
class App extends React.Component {
constructor(props){
super(props)
this.state = {
width:30; //default
};
}
render(){
//when state changes the width changes
const style = {
width: this.state.width
}
return(
<div>
//when button is clicked the style value of width increases
<button onClick={() => this.setState({width + 1})}></button>
<div className='progress-bar'
role='progressbar'
style={style}>
</div>
</div>
);
}
:-)