My fullscreen modal is aligned to the left. Centered property does not solve it. I have a row of the grid that dynamically displays a series of Cards. Each Card has the modal associated, so when you click the Card the modal opens with information from the Card.
This is the grid where i render it
<Grid.Column key={this.props.sensorid} width={4}>
<Card
onClick={() => {
this.setState({ modalOpen: true });
}}
color={color}
header={String(porce) + " %"}
description={this.props.sensorname}
meta={nivelUno + " mm"}
/>
<ModalSensor
sensorWell={this.props.sensorWell}
sensorName={this.props.sensorConPrefijo}
sensorId = {this.props.sensorid}
modalOpen={this.state.modalOpen}
handleClose={() => {
this.setState({ modalOpen: false });
}}
/>
</Grid.Column>
This is the modal
export default class ModalSensor extends Component {
render() {
return (
<div>
<Modal
centered={true}
open={this.props.modalOpen}
onClose={this.props.handleClose}
closeOnEscape={true}
size={"Fullscreen"}
>
<Modal.Header>Nivel del sensor {this.props.sensorName}</Modal.Header>
<Modal.Content>
<Sensor sensorwell={this.props.sensorWell} sensorcodigo={this.props.sensorName}/>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color="orange"
type="button"
icon="checkmark"
labelPosition="right"
onClick={this.props.handleClose}
content="Cerrar"
/>
</Modal.Actions>
</Modal>
</div>
);
}
}
that's a common problem when using more than one css library just inspect your element with your browser dev tool and try to figure it out or else past it here None can help you (probably) because it's a css problem and you haven't any css here.
Good luck man.
I've also encountered this type of layout bug, but I fixed it by adding a custom class to <div class="ui fullscreen modal transition visible active" />
.customClass {
left: 50%;
transform: translateX(-50%);
}
Related
I have the following use case described in the image below.
I'm using Bootstrap 5 & React with Typescript
There are two components in a page called MainPage.tsx called Component1.tsx and Component2.tsx
Component2 has many more elements/content than Component1, so I want to put a scrollbar into it
I want Component1 to be the same height as Component2
On screen sizes with a width larger than >=768px (Boostrap .md breakpoint) I want the Component2 to be to the right of Component1. On mobile-like screens with widths >=576px (Bootstrap .sm breakpoint), I want Component2 to be right below Component1. In both modes, Component1 maintains its scrollbar.
However, what happens in my current code is that on mobile-like screens (when Component2 is below Component1), there is a big empty space between the two components.
My current code looks like this:
// MainPage Component
const MainPage = () => {
}
return (
<div className='d-flex flex-column flex-lg-row'>
<Component1 />
<Component2 />
</div>
)
}
export { MainPage }
// Component1.tsx
const Component1 = () => {
return (
<div className='flex-column flex-lg-row-auto w-100 w-lg-300px w-xl-400px mb-10 mb-lg-0'
style={{ overflow: 'scroll', overflowX: "hidden", height: "100vh" }}>
<div className='card card-flush'>
<div className='card-header pt-7'>
<OtherComponent1>
</div>
<div className='card-body pt-5'>
<div
className='scroll-y me-n5 pe-5 h-200px h-lg-auto'>
<OtherComponent2> />
</div>
</div>
</div>
</div>
)
}
export { Component1 }
// Component2.tsx
const Component2 = () => {
return (
<div className='flex-lg-row-fluid ms-lg-7 ms-xl-10'>
<div className='card' style={{ height: '100vh', overflowX: "hidden" }}>
<OtherComponent3/>
</div>
</div>
)
}
export { Component2}
However, what happens is that with this code, in boostrap .md screen-sizes it works as intended, but in bootstrap .sm screens-sizes, there's a big empty space between the two components. I suspect the problem is due to the "100vh" in Component1.tsx
What is the culprit and how can I solve it?
How can I add/ remove a className on click to change the style of some component?
I want to rotate the arrow on the right when I click on it and display: none; all the components beside it.
I also want to add do the same thing when I hit the mobile breakpoint
const [isRotated, setIsRotated] = useState(false);
handleClick() {
setIsRotated(true)
}
<button className={isRotated && 'rotate-class'} onClick={handleClick} />
{ !isRotated && <Element/>} // this will hide the element when clicked on the button
This would a better approach then setting display: none on the other elements, but if you must do that, do this:
<Element style={{ display: isRotated ? 'none': 'block' }} /> // I'm guessing the default style of display is 'block' of the elements you want to hide
You can add boolean state and function for change state same this code.
function App() {
const [state, setState] = useState(true);
const rotateHandler = () => {
setState(() => !state);
};
return (
<div className="App">
{/* button for change state */}
<button onClick={rotateHandler}>click for rotate and hide</button>
{/* icon for rotate */}
<div>
<FontAwesomeIcon
icon={faAngleRight}
style={{
transform: state ? "rotate(90deg)" : "rotate(0deg)"
}}
/>
</div>
{/* text hide when */}
<div style={{ display: state ? " block" : "none" }}>
<div>text hide after state is false</div>
<div>you can click on button</div>
<div>for rotate arrow icon</div>
<div>and hide this text</div>
</div>
</div>
);
}
I add conditions in inline style, but you can add conditions on className
className={state ? "show" : "hide"}
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 have an app file which contains my own custom appbar and different page components:
const styles = theme => ({
appBar: {
width:'100%',
},
});
class App extends Component {
render() {
const {classes} = this.props;
return (
<React.Fragment>
<CssBaseline />
<AppBar position="sticky" className={classes.appBar} />
<Page1 show={someCondition} />
<Page2 show={someCondition} />
.
.
<Page99 show={someCondition} />
</React.Fragment>
);
}
}
The Appbar is sticky so it always shows on the top.
Each page component has a button which is always on the top of that page:
const styles = theme => ({
button: {
width:'100%',
},
});
class Page99 extends Component {
render() {
const {classes} = this.props;
return (
<React.Fragment>
<div>
<Button variant="contained" className= {classes.button}>
Action Button
</Button>
</div>
{/* Some other stuff */>
</React.Fragment>
);
}
}
I know want this button to always be right under the appbar. So when the user scrolls down this button should remain sticky just like the appbar does. I tried to set the positioning to sticky hoping it would stack underneath it but it wouldn't. The appbar is dynamic so I don't know the exact height it will be since on different resolutions it will look different so I couldn't use something like fixed positioning.
You can set position of page container as relative and set button as absolute.
the you can align it to top right of the page or wherever you want.
Check this fiddle is this is what you need
.componentparent {
position: relative;
height:100px;
max-height: 50px;
overflow: auto;
}
.button {
position: fixed;
top: 30px;
}
.otherelements{
top: 70px;
position: relative;
}
<div id="parent-container">
<div> your app bar </div>
<div class='componentparent'>
<button class='button'>my button</button>
<div class='otherelements'>your component</div>
</div>
</div>
Place your button inside your appbar and set your button to position to absolute and add top: 100% to move it exactly at the bottom of appbar.
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.