I'm using antd forms in react, but my input is not using full width
<div className='loginForm'>
<Form
className='form'
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
style={{
maxWidth: 600,
}}
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off">
<Form.Item
name="email"
rules={[
{
required: true,
message: 'Please input your email!',
},
]}
>
<Input placeholder='Email' />
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password placeholder='Password' />
</Form.Item>
</div>
Why does it not extend to the full width?
I know this is probably really simple but i can't work it out, where am I going wrong?
Related
I am using yup schema object for field validation in react.
so anyone know how to add color to error message or any other way to add color to requird message
below is the code -
const ValidationSchema = yup.object({name: yup
.string('Enter your name'),
age:yup
.number('Enter your name'),
.required('number required')
})
This is how the form is being used -
const formik = useFormik({
initialValues: {
name: '',
customerId:'',
email:'',
phoneNumber:'',
age: '',
gender: '',
race: '',
state_code: '',
county_code: '',
},
validationSchema: validationSchema,
onSubmit: async (values) => {
let diseases = Object.keys(selectValue).filter((keyName) => selectValue[keyName] === true && keyName)
console.log(responseAPI)
},
});
<form onSubmit={formik.handleSubmit}>
<Grid container rowSpacing={2} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{ marginBottom: '2em' }}>
<Grid item xs={12} md={6} lg={4} sx={{ fontWeight: 'initial', '& .MuiTextField-root': { m: 1, width: '25ch' }, }}>
<ArgonTextField
onChange={formik.handleChange} value={formik.values.name} id="name" type="string" name="name"
placeholder="Name"
/>
</Grid>
<Grid item xs={12} md={6} lg={4} sx={{ fontWeight: 'initial', '& .MuiTextField-root': { m: 1, width: '25ch' }, }}>
<ArgonTextField placeholder="Phone Number"
onChange={formik.handleChange} value={formik.values.phoneNumber} id="phoneNumber" type="number" name="phoneNumber"
/>
</Grid>
</Grid>
<AddCustomerDetails data={values} selectValue={selectValue} setSelectValue={setSelectValue} diseases={diseases} formik={formik} setDiseases={setDiseases}
description={description} setDescription={setDescription}
/>
</form>
so I want number required message color to be red its now black in color.
I would like to put style on the "Forms_formline__3DRaL" div (seen below)
This div comes from a component; and it seems like this style is applied to the input , and not its parent div.
How can I, though reactjs, define the style "display: none" for the parent div?
Here is my code:
<MyInput
style={{
display:
type == 1
? 'none'
: 'block',
}}
id="name"
type="text"
label={t('elevation_loss')}
value="name"
/>
Here is the result in my chrome source:
<div class="Forms_formline__3DRaL">
<label for="name">Name *</label>
<input type="text" id="name" value="" style="display: none;">
</div>
You can try doing something like this
import { CSSProperties, FC } from 'react';
export const MyInput: FC<{
styleOverrides: {
container: CSSProperties;
};
id: string;
type: string;
label: string;
}> = ({ styleOverrides }) => {
return (
<>
<div className="Forms_formline__3DRaL" style={styleOverrides.container}>
...
</div>
</>
);
};
I need to remove the border. I used some css from stack overflow but the issue is not fixed yet . If any one please help me to fixed this issue .I shall be very thank full.
what css I write to remove the border.
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="phoneNumber"
disableUnderline={false}
// label="Phone Number"
name="phoneNumber"
autoComplete="phoneNumber"
autoFocus
onChange={handlePhoneNumberChange}
className={classes.textField}
placeholder="Phone Number"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>
I was looking for a borderless text-field and this is working for me...
<TextField
variant="standard" // <== changed this
margin="normal"
required
fullWidth
id="phoneNumber"
name="phoneNumber"
autoComplete="phoneNumber"
autoFocus
onChange={handlePhoneNumberChange}
placeholder="Phone Number"
InputProps={{
startAdornment: <AccountCircle />, // <== adjusted this
disableUnderline: true, // <== added this
}}
/>
These 2 props seem to be the key...
variant="standard"
InputProps={{
disableUnderline: true,
}}
InputProps can be passed to the style the variants of the inputs. For outlined input there a class named .MuiOutlinedInput-notchedOutline which sets the border in this question's case. To modify this class, pass the styles to the notchedOutline prop in InputProps.
const useStyles = makeStyles(() => ({
noBorder: {
border: "none",
},
}));
const TextInput = props => {
const { onChange, type} = props;
const classes = useStyles();
return (
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="phoneNumber"
disableUnderline={false}
// label="Phone Number"
name="phoneNumber"
autoComplete="phoneNumber"
autoFocus
classes={{notchedOutline:classes.input}}
// onChange={handlePhoneNumberChange}
className={classes.textField}
placeholder="Phone Number"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
classes:{notchedOutline:classes.noBorder}
}}
/>
);
};
Here is the working sandbox link: https://codesandbox.io/s/material-demo-forked-nhlde
to remove border in TextField fieldset in MUI 5,
simply add following.
sx={{
"& fieldset": { border: 'none' },
}}
I tried all the answers here.
Doesn't work
I found this InputBase
It works very nicely.
This is exactly what you should use.
They have provided the sandbox too
Sandbox InputBase
In your textField style add outline: 'none'
As at 2022, if your using MUI >= version 5, you can use some solutions here, and currently there's no where in the doc on how do this in Textfield.
Another nice component MUI provides is the Input, and luckily for us it accepts almost all props passed to Textfield, that's where you can do disableUnderline={false} and it will work as expected.
<Input
disableUnderline={true}
variant="standard"
autoFocus
onChange={yourChangeHandler}
value={value}
placeholder="Title"
fullWidth
/>
Finally, the following css works (2022)
'& .MuiInput-root': {
'&:before, :after, :hover:not(.Mui-disabled):before': {
borderBottom: 0,
},
},
For Outlined TextField
If you want to remove outlines from the outlined text field. Then add this in your TextField
sx={{border: 'none',"& fieldset": { border: 'none' },}}
Here is your code...
<TextField
variant="outlined"
sx={{border: 'none', "& fieldset": { border: 'none' },}}
margin="normal"
required
fullWidth
id="phoneNumber"
disableUnderline={false}
// label="Phone Number"
name="phoneNumber"
autoComplete="phoneNumber"
autoFocus
onChange={handlePhoneNumberChange}
className={classes.textField}
placeholder="Phone Number"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AccountCircle />
</InputAdornment>
),
}}
/>
For Standard TextField
If you want to remove underline from the standard text field. Then add this in your TextField
InputProps={{ disableUnderline: true }}
Here is code
<TextField
fullWidth
placeholder="Search..."
InputProps={{ disableUnderline: true }}
/>
Added sx prop with below attributes in TextField and it worked fine for me
<TextField
sx={{
input: {
border: "none",
},
"::placeholder": { color: "white" },
}}
/>
The documentation doesn't offer any good way to do this
So you can select the Mui selector for that element and modify it directly
This worked for me.
You can override the css
<TextField
id="outlined-basic"
label="Outlined"
variant="outlined"
sx={{ "& .MuiOutlinedInput-notchedOutline": { border: "none" } }}
/>
<TextField
id="filled-basic"
label="Filled"
variant="filled"
sx={{
"& .MuiFilledInput-underline:before": {
borderBottom: "none",
},
"& .MuiFilledInput-underline:after": {
borderBottom: "none",
},
"& .MuiFilledInput-underline:hover:not(.Mui-disabled):before": {
borderBottom: "none",
},
}}
/>
Please check it in codesandbox
Try to override style
See example below
disableUnderline
If true, the input will not have an underline.
<Input
variant="standard"
disableUnderline={true}
required
color="info"
fullWidth
margin="dense"
focused
/>
API
Just add
".MuiOutlinedInput-notchedOutline": { border: "none" },
to the sx prop.
This works both for MUI Select and Textfield
If you want to remove the border for all MuiOutlinedInput components, add this to your theme's components object:
export const theme = createTheme({
// ...
components: {
// ...
MuiOutlinedInput: {
styleOverrides: {
notchedOutline: {
border: 'none',
},
},
},
},
})
I am currently designing a login page using ant design in React. I tried using the grid system to design the login page. However, I am stuck with this issue where my columns are too far apart from one another. I would like to close the gap between them. Below is the screenshot of my issue:
Below is my code
import React from 'react'; import { Row, Alert, Col, Form, Input, Button, Checkbox, Card } from 'antd'; import { UserOutlined, MailOutlined, LockOutlined } from '#ant-design/icons';
const Register = () => { const onSubmit = (values) => {};
return (
<>
<Row
justify='center'
align='middle'
style={{ height: '100vh', flexWrap: 'wrap' }}
>
<Row style={{ width: '100%' }} justify='center'>
<Col xs={18} md={8}>
<Alert type='error' message='User already exist' banner />
</Col>
</Row>
<Col xs={18} md={8} style={{ width: '100%' }}>
<Card className='login-card'>
<Form
name='normal_login'
className='login-form'
initialValues={{
remember: true,
}}
onFinish={onSubmit}
>
<h1 id='signin-header'>Register</h1>
<Form.Item
name='name'
rules={[
{
required: true,
message: 'Please input your name!',
},
]}
hasFeedback
>
<Input
prefix={<UserOutlined className='site-form-item-icon' />}
placeholder='Name'
/>
</Form.Item>
<Form.Item
name='email'
rules={[
{
required: true,
message: 'Please input your email!',
},
{
type: 'email',
message: 'Please input a valid email!',
},
]}
hasFeedback
>
<Input
prefix={<MailOutlined className='site-form-item-icon' />}
placeholder='Email'
/>
</Form.Item>
<Form.Item
name='password'
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
hasFeedback
>
<Input.Password
placeholder='Password'
prefix={<LockOutlined className='site-form-item-icon' />}
/>
</Form.Item>
<Form.Item>
<Form.Item name='remember' valuePropName='checked' noStyle>
<Checkbox>Remember me</Checkbox>
</Form.Item>
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit' block>
Register
</Button>
<div id='register-text'>
Arleady have an account? Login now!
</div>
</Form.Item>
</Form>
</Card>
</Col>
</Row>
</> ); };
export default Register;
Try to use alignItems: 'stretch' in your first row.
...
<Row
justify='center'
align='middle'
style={{ height: '100vh', flexWrap: 'wrap', alignItems: 'stretch' }}
>
<Row style={{ width: '100%', marginBottom: '10px' }} justify='center' align="bottom">
...
Working CodeSandBox
I am building a login page with react, and here is what I have got
class Landing extends Component {
state = {
box: {
width: "300px",
height: "100px",
margin: "0 auto",
border: "1px solid blue",
textAlign: "center",
verticalAlign: "middle",
lineHeight: "90px",
backgroundColor: "white",
},
landingBody: {
backgroundColor: "#ccffff",
height: `100vh`,
width: `100vw`,
display: `flex`,
alignItems: `center`,
justifyItems: `center`,
},
};
getForm() {
return (
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" size="50" />
<br />
<br />
<label for="pin">PIN:</label>
<input type="text" id="pin" name="pin" maxlength="4" size="4" />
<br />
<br />
<input type="submit" value="Submit"></input>
</form>
);
}
render() {
return (
<div style={this.state.landingBody}>
<div style={this.state.box}>{this.getForm()}</div>
</div>
);
}
}
export default Landing;
I want the box to be in the center of the page, and the username and pin textboxes well inside the box. But the textboxes overflows way out of the containing box. Also, the shape is a bit wierd.
Please help.
First, you need to remove the height prop of the box, flexbox landingbody then can holding the box in center position.
box: {
width: "300px",
margin: "0 auto",
border: "1px solid blue",
textAlign: "center",
verticalAlign: "middle",
lineHeight: "90px",
backgroundColor: "white",
},
Second, the size of your pin textbox is 50, maybe this prop makes the input so long to overflow the container, you can remove it, restyle it's width.
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
Any question?
The whole CSS style object shouldn't be in state as you aren't probably changing all the values.
The main reason your elements are overflowing is: size="50" and lineHeight: "90px". You should use width and height instead.
Also I recommend using a CSS framework to make it look a bit nicer.
Here, I quickly made an example login page for you using Bulma https://codesandbox.io/s/sad-gould-ill5z
modify input width id fname like below:
<input type="text" id="fname" name="fname" size="50" style={{width: '100%',height: '5px'}} />