<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}>
<FormLabel component="legend">Format</FormLabel>
<RadioGroup row aria-label="format" name="format" onChange={changeHandler} inputRef={register({ required: true })}>
<FormControlLabel value="radio" control={<Radio inputRef={register({ required: true })} />} label="Radio" />
<FormControlLabel value="podcast" control={<Radio inputRef={register({ required: true })} />} label="Podcast" />
<FormControlLabel value="both" control={<Radio inputRef={register({ required: true })} />} label="Both" />
</RadioGroup>
</FormControl>
So that is my FormControl,
However what is happening is the FormControlLabel are all going to the left (see pic)
What I want it to do is be evenly spaced out from left to right of the screen.
In your CSS file, try
display: flex;
justify-content: space-between;
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
</div>
More info about flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Related
I have a Form and in that form I have all Fields like Input,Dropdown,Radio and Checkbox..
Now I am able to Post my data to the server using Redux, And I am able to post all the data except Checkbox values and Radio Button values....
What Changes I need to do for Checkbox and Radio button values..
This is the Action :
export const createData =(product) =>{
return async (dispatch)=>{
try {
let dataUrl ="http://localhost:3000/users";
let res = await axios.post(dataUrl,product);
dispatch({type :CREATE_DATA, payload:res.data});
} catch(error){
console.log(error)
}
}
}
This is the Reducer :
export const reducerName = (state = initialstate, action) => {
switch (action.type) {
case actiondata.GETALL_DATA:
return {
...state,
productdata : action.payload
}
case actiondata.CREATE_DATA :
return {
...state
}
default:return state
}
}
This is the ModelPopup :
const AddModel = () => {
const [model, setmodel] = useState(false)
const adduser = () => {
setmodel(true);
};
const closeModal = () => {
setmodel(false);
};
const [data, setdata] = useState({
"UserName" : "",
"PhoneNumber" : "",
"email" : "",
"dropDown" :"",
"gender" : null,
"checking" :[]
})
let dispatch = useDispatch();
//Reading the Data from Store
let readdatafromstore = useSelector((state)=>{
return state.keepdatatostore;
})
const handleChnage=(e)=>{
setdata({...data,[e.target.name]:e.target.value});
}
const handleSubmit=(e)=>{
e.preventDefault();
dispatch(allActions.createData(data));
}
return (
<React.Fragment>
<div className="container">
<button type="button" className="btn btn-primary" onClick={adduser}>Add User</button>
</div>
{model && (
<div className="modal" style={{ display: "block" }}>
<div className="modal-dialog" style={{ maxWidth: "60%" }}>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={closeModal}></button>
</div>
<div className="modal-body">
<form>
<div className="row">
<div className="col">
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">UserName</label>
<input type="text" className="form-control" placeholder='UserName' name="UserName" onChange={handleChnage} />
</div>
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">PhoneNumber</label>
<input name="phone" className="form-control" placeholder='PhoneNumber' name="PhoneNumber" onChange={handleChnage} />
</div>
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">Email</label>
<input type="email" className="form-control" placeholder='EmailAddress' id="exampleInputEmail1" aria-describedby="emailHelp" name="email" onChange={handleChnage} />
</div>
{/* <div className="mb-3">
<label
htmlFor="exampleInputPassword1"
className="form-label"
>
Date
</label>
<input
type="date"
className="form-control"
id="exampleInputPassword1"
/>
</div> */}
</div>
<div className="col">
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="fw-bold">DropDown Value</label>
<select className="form-select" aria-label="Default select example" name="dropDown" onChange={handleChnage} >
<option selected>Select From Dropdown</option>
<option value="ReactJS">ReactJS</option>
<option value="JavaScript">JavaScript</option>
<option value="HtmlCss">HtmlCss</option>
</select>
</div>
<div className="mb-3">
<label className="mb-2 fw-bold">Gender</label>
<div className="form-check">
<input className="form-check-input" type="radio" name="gender" id="male" onChange={handleChnage}/>
<label className="form-check-label" htmlFor="flexRadioDefault1" >Male</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="gender" id="female" onChange={handleChnage}/>
<label className="form-check-label" htmlFor="flexRadioDefault2">Female</label>
</div>
</div>
<div className="mb-3">
<label className="mb-2 fw-bold">Checkbox Value</label>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label className="form-check-label" htmlFor="flexCheckDefault">Javascript</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckChecked" />
<label className="form-check-label" htmlFor="flexCheckChecked">React JS</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckChecked" />
<label className="form-check-label" htmlFor="flexCheckChecked">HTML</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" value="" id="flexCheckChecked" />
<label className="form-check-label" htmlFor="flexCheckChecked">CSS</label>
</div>
</div>
</div>
</div>
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={closeModal}>Close</button>
<button type="button" className="btn btn-primary" onClick={handleSubmit}>Add User</button>
</div>
</div>
</div>
</div>
)}
</React.Fragment>
)
}
For Radio Button, Just add value attribute (value="male",value="female",value="others")
I have a form and I am submitting the form values to the Server, But Right after submitting the data, I called a "HandleClear()" function to clear the form fields, But stills selected values is shown after submitting the Data..
When I console log, I am bale to see that Data is getting cleared..
const [data, setdata] = useState({
"UserName": "",
"PhoneNumber": "",
"email": "",
"dropDown": "",
"gender": null,
"checking": [],
// "id" :""
})
const handleSubmit = (e) => {
e.preventDefault();
dispatch(allActions.createData(data));
handleClear();
//setmodel(false);
}
This is HandleClear function
const handleClear=()=>{
let clear={
"UserName": "",
"PhoneNumber": "",
"email": "",
"dropDown": "",
"gender": null,
"checking": [],
}
//console.log(clear);
setdata(clear);
}
return (
<React.Fragment>
<div className="container">
<button type="button" className="btn btn-primary" onClick={adduser}>Add User</button>
</div>
{model && (
<div className="modal" style={{ display: "block" }}>
<div className="modal-dialog" style={{ maxWidth: "60%" }}>
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" onClick={closeModal}></button>
</div>
<div className="modal-body">
<form>
<div className="row">
<div className="col">
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">UserName</label>
<input type="text" className="form-control" placeholder='UserName' name="UserName" onChange={handleChnage} />
</div>
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">PhoneNumber</label>
<input name="phone" className="form-control" placeholder='PhoneNumber' name="PhoneNumber" onChange={handleChnage} />
</div>
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="form-label fw-bold">Email</label>
<input type="email" className="form-control" placeholder='EmailAddress' id="exampleInputEmail1" aria-describedby="emailHelp" name="email" onChange={handleChnage} />
</div>
{/* <div className="mb-3">
<label
htmlFor="exampleInputPassword1"
className="form-label"
>
Date
</label>
<input
type="date"
className="form-control"
id="exampleInputPassword1"
/>
</div> */}
</div>
<div className="col">
<div className="mb-3" style={{ textAlign: "left" }}>
<label className="fw-bold">DropDown Value</label>
<select className="form-select" aria-label="Default select example" name="dropDown" onChange={handleChnage} >
<option >Select From Dropdown</option>
<option value="ReactJS">ReactJS</option>
<option value="JavaScript">JavaScript</option>
<option value="HtmlCss">HtmlCss</option>
</select>
</div>
<div className="mb-3">
<label className="mb-2 fw-bold">Gender</label>
<div className="form-check">
<input className="form-check-input" type="radio" name="gender" id="male" value="male" onChange={handleChnage} />
<label className="form-check-label" htmlFor="flexRadioDefault1" >Male</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="gender" id="female" value="female" onChange={handleChnage} />
<label className="form-check-label" htmlFor="flexRadioDefault2">Female</label>
</div>
<div className="form-check">
<input className="form-check-input" type="radio" name="gender" id="others" value="others" onChange={handleChnage} />
<label className="form-check-label" htmlFor="flexRadioDefault2">Others</label>
</div>
</div>
<div className="mb-3">
<label className="mb-2 fw-bold">Checkbox Value</label>
<div className="form-check">
<input className="form-check-input" type="checkbox" name="checking" value="Javascript" onChange={handleChnage} />
<label className="form-check-label" htmlFor="flexCheckDefault">Javascript</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" name="checking" value="React JS" onChange={handleChnage} />
<label className="form-check-label" htmlFor="flexCheckChecked">React JS</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" name="checking" value="HTML" onChange={handleChnage} />
<label className="form-check-label" htmlFor="flexCheckChecked">HTML</label>
</div>
<div className="form-check">
<input className="form-check-input" type="checkbox" name="checking" value="CSS" onChange={handleChnage} />
<label className="form-check-label" htmlFor="flexCheckChecked">CSS</label>
</div>
</div>
</div>
</div>
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal" onClick={closeModal}>Close</button>
<button type="button" className="btn btn-primary" onClick={handleSubmit}>Add User</button>
</div>
</div>
</div>
</div>
)}
</React.Fragment>
)
}
Just Add Value Attribute to the Form Fields
<Card className="input">
<form onSubmit={addUserHandler} className="input">
<label htmlFor="username">Username</label>
<input id="username" type="text" />
<label htmlFor="age">Age (Years)</label>
<input id="age" type="text" />
<button type="submit">Add User</button>
</form>
</Card>
Now the Card component below.
return <div className="card">{props.children}</div>;
How to align this two for css styling?
css
.card > .input-form {
background-color: gray
}
code as below
<Card className="input">
<form onSubmit={addUserHandler} className="input-form">
<label htmlFor="username">Username</label>
<input id="username" type="text" />
<label htmlFor="age">Age (Years)</label>
<input id="age" type="text" />
<button type="submit">Add User</button>
</form>
</Card>
Now the Card component below.
return <div className="card">{props.children}</div>;
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>
);
}
I am using Grails 2.4.2. I want to use Grails default CSS with a few modifications. Now I need to place the field label on top of the field instead of left side. Can anyone please help me on this? I am weak in CSS. Thanks in advance.
Here are my form element where I want to show 4 field in a row :
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fullName', 'error')} required">
<label for="fullName">
<g:message code="users.fullName.label" default="Full Name"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="fullName" required="" value="${usersInstance?.fullName}"/>
<label for="email">
<g:message code="users.email.label" default="Email"/>
<span class="required-indicator">*</span>
</label>
<g:field type="email" name="email" required="" value="${usersInstance?.email}"/>
</div>
And output for above code is as below:
Now I want to add 4 fields in a row and the label of all field will be on top. Can you please help ?!!!
single field in each line ::
Form element ::
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'username', 'error')} required">
<label for="username">
<g:message code="users.username.label" default="Username"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="username" required="" value="${usersInstance?.username}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'password', 'error')} required">
<label for="password">
<g:message code="users.password.label" default="Password"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="password" required="" value="${usersInstance?.password}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fullName', 'error')} required">
<label for="fullName">
<g:message code="users.fullName.label" default="Full Name"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="fullName" required="" value="${usersInstance?.fullName}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'email', 'error')} required">
<label for="email">
<g:message code="users.email.label" default="Email"/>
<span class="required-indicator">*</span>
</label>
<g:field type="email" name="email" required="" value="${usersInstance?.email}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'phone', 'error')} required">
<label for="phone">
<g:message code="users.phone.label" default="Phone"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="phone" required="" value="${usersInstance?.phone}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'fax', 'error')} required">
<label for="fax">
<g:message code="users.fax.label" default="Fax"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="fax" required="" value="${usersInstance?.fax}"/>
</div>
<div class="fieldcontain ${hasErrors(bean: usersInstance, field: 'address', 'error')} required">
<label for="address">
<g:message code="users.address.label" default="Address"/>
<span class="required-indicator">*</span>
</label>
<g:textField name="address" required="" value="${usersInstance?.address}"/>
</div>
Here you go. Just define the following CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fieldcontain label, .fieldcontain .property-label {
display: block;
text-align: left;
width: 100%
}
.fieldcontain input {
width: 100%;
}
.fieldcontain {
width: 25%;
display: inline-block;
float: left
}
.row:before, .row:after {
display: table;
content: " ";
}
And your HTML should look like this:
<fieldset class="form">
<div class="row">
<div class="fieldcontain required">
<label for="firstName">
First Name
<span class="required-indicator">*</span>
</label>
<input type="text" name="firstName" required="" value="" id="firstName">
</div>
<div class="fieldcontain required">
<label for="lastName">
Last Name
<span class="required-indicator">*</span>
</label>
<input type="text" name="lastName" required="" value="" id="lastName">
</div>
<div class="fieldcontain required">
<label for="email">
Email
<span class="required-indicator">*</span>
</label>
<input type="text" name="email" required="" value="" id="email">
</div>
<div class="fieldcontain required">
<label for="number">
Number
<span class="required-indicator">*</span>
</label>
<input type="text" name="number" required="" value="" id="number">
</div>
</div>
</fieldset>
Wrap, your set of 4 elements i.e. .fieldcontain in a div with class .row like I've shown in the example.
Although, Grails provide a basic CSS for styling so the new projects can be bootstrapped fastly, but I recommend you to use Twitter Bootstrap.
...
<style>
#fieldlabel {display:block;}
#fieldinput {display:block;}
</style>
...
<body>
<label id="fieldlabel"><input type="text" id="fieldinput"></label>
</body>
...