I would like to make filters using a modal window. But I have a problem, in that the checkbox and the label appear on different lines.
But I would like to see the checkbox and the label on the same line with a little space between. Tell me how this can be done. My code is below.
export default function FilterMethod () {
const [methods, setMethods] = useState([]);
const onMethodChange = (e) => {
let selectedMethods = [...methods];
if (e.checked)
selectedMethods.push(e.value);
else
selectedMethods.splice(selectedMethods.indexOf(e.value), 1);
setMethods(selectedMethods);
}
return (
<div>
<h6>Method</h6>
<div>
<Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
<label htmlFor="method1">Connect</label>
</div>
<div className="field-checkbox">
<Checkbox inputId="method2" name="method" value="Delete" onChange={onMethodChange} checked={methods.indexOf('Delete') !== -1} />
<label htmlFor="method2">Delete</label>
</div>
<div className="field-checkbox">
<Checkbox inputId="method3" name="method" value="Get" onChange={onMethodChange} checked={methods.indexOf('Get') !== -1} />
<label htmlFor="method3">Get</label>
</div>
<div className="field-checkbox">
<Checkbox inputId="method4" name="method" value="Head" onChange={onMethodChange} checked={methods.indexOf('Head') !== -1} />
<label htmlFor="method4">Head</label>
</div>
</div>
)}
You can convert checkboxes to inline elements:
<div>
<Checkbox style={{display: "inline"}} inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
<label htmlFor="method1">Connect</label>
</div>
or, use flex layout:
<div style={{display: "flex"}}>
<Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
<label htmlFor="method1">Connect</label>
</div>
By default, the div - parent of the checkboxes is a block level element. It should work, if you change it to be flex.
<div style={{display: "flex"}}>
<Checkbox inputId="method1" name="method" value="Connect" onChange={onMethodChange} checked={methods.indexOf('Connect') !== -1} />
<label htmlFor="method1">Connect</label>
</div>
Update.
Add space between the Checkbox and the label
Depending on how much space you need and the width of the div, you can use
<div style={{display: "flex", justifyContent: "space-between"}}>
- - -
Set padding-right / margin-right on the outer most element in Checkbox
Set padding-left / margin-left on the label
Related
I am making a image slider in react.js. made images div . overflow scroll. I want the current scrollbar value of the images div, like window.scrollY, for checking radio button when the scroll value is coming particular position.
function Events() {
const images = [
"https://picsum.photos/id/0/5000/3333",
"https://picsum.photos/id/1/5000/3333",
"https://picsum.photos/id/2/5000/3333",
"https://picsum.photos/id/3/5000/3333",
"https://picsum.photos/id/4/5000/3333",
"https://picsum.photos/id/5/5000/3333"
]
const [scrolled,setScrolled] = useState(1)
const events2 = document.querySelector("#images")
const slide = () =>{
if(events2.scrollLeft > 100){
console.log("hi")
}
}
return (
<div className='events' id='events' >
<div className='images' id="images" onScroll={slide}>
{images.map((obj) => {
return (
<div className="image">
<img src={obj} alt="NETWORK ERROR" draggable="false" />
</div>
)
})}
</div>
<div className="radio">
<input type="radio" name='img' defaultChecked />
<input type="radio" name='img' />
<input type="radio" name='img' />
<input type="radio" name='img' />
<input type="radio" name='img' />
</div>
</div>
)
I am used console.log("hi") for testing. but it is not working. And I used scrollLeft for getting vertical value of the images div. not working why?
I'm trying to make the background change whenever the user is uploading an image, the background is set on default however, I found that I have to use <input /> but then I got stuck
this my work so far !
const [backgroundShown, setBackgroundShown] = useState(false);
const changeBackground = () => {
setBackgroundShown(!backgroundShown);
};
{file && (
<img
className="writeImg"
src={URL.createObjectURL(file)}
/>
)
}
<form className="writeForm" onSubmit={handlerSubmit}>
<div className="writeFormGroup">
<label htmlFor="fileInput">
<img
type={backgroundShown ? "img" : "file"}
className="writeIcon"
src="/Images/Upload-Vector.png"
></img>
</label>
<div>
<input
onClick={changeBackground}
type={backgroundShown ? "file" : "img"}
accept="image/*"
id="fileInput"
style={{ display: "none" }}
onChange={e => setFile(e.target.files[0])}>
</input>
</div>
It sounds like you want to remove the button when the user "uploads".
If so, just conditionally render it when the user hasn't uploaded.
{file && (
<img
className="writeImg"
src={URL.createObjectURL(file)}
/>
)
}
{!file &&
<form className="writeForm" onSubmit={handlerSubmit}>
<div className="writeFormGroup">
<label htmlFor="fileInput">
<img
type={backgroundShown ? "img" : "file"}
className="writeIcon"
src="/Images/Upload-Vector.png"
></img>
</label>
<div>
<input
onClick={changeBackground}
type={backgroundShown ? "file" : "img"}
accept="image/*"
id="fileInput"
style={{ display: "none" }}
onChange={e => setFile(e.target.files[0])}>
</input>
</div>
}
I want to set the position of the dropdown element such that when I click on that it should remain in the same position and it should not move. As of now when I am clicking on the dropdown icon it is moving down. How can I fix this? I want that icon to stick to the input element and should not move up or down on clicking the icon.
Here's the code :
<Grid item md={6} lg={6} xs={12}>
<div className="milestone-due-date">
DUE DATE
</div>
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
</Grid>
<div className="milestone-due-date">
DUE DATE
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
</div>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
css
.milestone-due-date {position:relative;}label{position: absolute;bottom: -10px;left: 0px;}
I'm using reactstrap in my project I have a simple card and I want to place a text area inside it using the following code:
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
type="textarea"
defaultValue="Hello world"
/>
</FormGroup>
</Form>
</CardBody>
</Card>
If I then try to set the height it just doesn't work. I have tried using style:
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
type="textarea"
defaultValue={tweet.full_text}
style={{ height: 220 }}
/>
</FormGroup>
</Form>
</CardBody>
</Card>
And also tried using a custom css class:
.text-area-custom {
height: 220px;
}
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
className="text-area-custom"
type="textarea"
defaultValue={tweet.full_text}
/>
</FormGroup>
</Form>
</CardBody>
</Card>
Neither of these methods work. Any idea what I am doing wrong here?
Try and set the rows attribute
<Card>
<CardBody>
<Form>
<FormGroup>
<Input
type="textarea"
defaultValue={tweet.full_text}
rows="5"
/>
</FormGroup>
</Form>
</CardBody>
</Card>
I have a login form using the Container component from Bootstrap. How do I vertically align the entire container in the center of the screen?
function Auth() {
return (
<Container >
<Row className="justify-content-center">
<Col sm={6}>
<Card >
<Card.Body>
<Form>
<Form.Group controlId="formBasicEmail">
<Form.Label>Username</Form.Label>
<Form.Control type="text" placeholder="Username" />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Login
</Button>
</Form>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}