I have a modal in my render method:
<ModalContainer>
<Modal isSmall={true} style={{width:'1100px', overflowY : "scroll"}}>
<div className='div-style'>
<ModalHeader>
<h3>Add Company</h3>
</ModalHeader>
<div className='div-style'>
{addingC.map((company, index) => { //renders each element in addingC, I want this div to be scroll-able as the user keeps adding a new object
return(
<div
key={index}
className="flex flex-row w-100 side-by-side"
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginBottom: "20px",
}}
>
<label htmlFor="name">Company Name</label>
<ModalInput
type="text"
id="name"
value={company.name}
onChange={(e) =>
this.setState({ newCompanyName: e.target.value })
}
></ModalInput>
<label htmlFor="website">
Company Website
</label>
<ModalInput
type="text"
id="website"
value={company.website}
onChange={(e) =>
this.setState({ newCompanyWebsite: e.target.value })
}
></ModalInput>
</div>
)})}
</div>
<ModalSaveButton type="button" onClick={() => this.addC()}> //add button that allows user to add another company
add
</ModalSaveButton>
this is the addC() method and adds in an empty object when called by the render method:
addC() {
let { addingC } = this.state;
addingC.push({ name: "", website: ""});
this.setState({ addingC });
}
this is the css file where I have also added Y overflow property:
.side-by-side {
display: flex;
flex-direction: row;
align-items: center;
}
.div-style {
overflow-y: auto; //added Y overflow
position: relative;
}
I would like the div to be scroll-able as the user adds new companies and currently once I add about 8 companies, the div becomes too large and instead of scrolling, the top part goes out of the page so its no longer visible as you can see here
In order to use overflow-y or overflow-x, you have to set height or width. Otherwise, it will keep using available space. If there is no space, it will go off the page.
In your CSS file, try adding height in div-style.
Related
I am having a logo where I need to center align it and need to draw horizontal line below the logo and after that horizontal line I need to place some content and after the content again I need to draw horizontal line. Below that I need to have a button. I have placed the logo center but I couldn't bring the horizontal lines and images one below the other. Could any one help me to resolve this issue. Thanks in advance!
OutPut I need is :
LOGO
--------------------------------------------------
Some Content
--------------------------------------------------
BUTTON
But I am getting like below :
LOGO --------------------------------------------------
BUTTON
function ModalComp() {
//Modal state
const [show, setShow] = useState(false);
//handlemodal logic
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const onLoginFormSubmit = (e) => {
e.preventDefault();
handleClose();
};
return (
<div>
<div className="content">
<img
src={BackGroundImage}
alt="none"
style={{
width: "20%",
}}
/>
</div>
<div
style={{
position: "relative",
alignItems: "center",
justifyContent: "center",
left: "-12%",
}}
>
<Button
variant="info"
class="text-center"
onClick={handleShow}
style={{ marginBottom: "1em" }}
>
Contact US
</Button>
</div>
<Modal show={show}>
<Modal.Header closeButton>
<Modal.Title>Contact Form</Modal.Title>
</Modal.Header>
<Modal.Body>
<ContactUs onSubmit={onLoginFormSubmit} />
</Modal.Body>
</Modal>
</div>
);
}
CSS:
.content {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
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"}
I have two buttons in a DialogActions like so.
The JSX I have is the following:
<DialogActions classes={{ root: classes.dialogActionsLeft }}>
<Button
autoFocus
onClick={() => {
setOpen(false);
}}
>
Cancel
</Button>
<Button
onClick={() => {
setOpen(false);
navigate("/");
}}
>
Finish
</Button>
</DialogActions>
And the CSS I have is:
const useStyles = makeStyles((theme) => ({
dialogActionsLeft: {
"&:nth-child(1)": {
justifyContent: `flex-start`
}
}
}));
If the pseudo selector isn't there both buttons will be left aligned, and if it is there, both buttons stay right aligned. This tells me I'm using the pseudo selector wrong but I can't figure out how to fix it
Do you need to left align both buttons?
If that is the case, try &:nth-child(n).
Update
You must specify justifyContent for dialogActionsLeft as well.
dialogActionsLeft: { justifyContent: 'space-between', '&:nth-child(1)': { justifyContent: flex-start, } }
Currently, the modal is too small to contain all email inputs when adding multiple users, overflowing the modal. Tried to apply CSS's height 100% property with no success. Here's some of the code:
const divEmail = {
content: {
position: "relative",
display: "block",
margin: "0 50px 0 30px",
background: "transparent"}
};
class PageAssistantSplitCourrielsCollaborateurs extends Component {
render() {
ayantDroits.push(
<div style={{ height: "100%" }}>
<div key={`champ--courriel__${elem}`}>
<Label style={divEmail} htmlFor={`champ--courriel__${elem}`}>
{_aD.name}
</Label>
<Translation>
{t => (
<Input
style={divEmail}
name={`champ--courriel__${elem}`}
id={_aD.rightHolderId}
defaultValue={_aD.email}
placeholder={t("flot.split.inscription.exemple")}
required={this.state.requis}
autoFocus={this.state.autoFocus}
type="email"
onChange={this.onChange}
/>
)}
</Translation>
</div>
</div>
);
});
return (
<div style={{ height: "100%" }}>
<Translation>
{t => (
<div>
{ayantDroits}
</div>
)}
</Translation>
</div>
);
}
}
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.