I am trying to use a FloatingLabel component alongside an InpuGroup component of the react-bootstrap package. I am able to get the inputs grouped but the height of the InputGroup.Text is greater than the FloatingLabel input.
Weird CSS when using FloatingLabel with InputGroup components of react-bootstrap
<InputGroup>
<FloatingLabel label="Email Address" className="mb-3">
<Form.Control id="floatingEmail" type="email" name="email" placeholder="email" value={person.email} onChange={updatePersonDetails} />
</FloatingLabel>
<InputGroup.Text>#crestdatasys.com</InputGroup.Text>
</InputGroup>
Is there any known solution or workaround to fix the CSS? Or am I making some mistake with calling the components in wrong order?
Related
I'm trying to find which class i need to override to modify the bar color of the component:
Here's my code:
<Input
id="email"
type="email"
placeholder="Enter your email"
className='mr-10'
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
The result is this:
What i want to do is edit the color of the bottom bar.
Does anyone know which class should i add to my sx{{}} prop to edit the color on focus?
Thanks for the help.
You should use <TextField /> for this. The variant prop will give you the design that you want.
<TextField
variant="standard"
sx={{
"& .MuiInput-underline:after": {
borderBottomColor: "green",
},
}}
/>
Note that there are other ways too, with styled or with theme, this is the fastest way to do it but may be not so scalable, so refer to the docs for more styling solutions.
Ref:
https://mui.com/material-ui/react-text-field/
https://mui.com/material-ui/guides/interoperability/#global-css
https://mui.com/material-ui/customization/theme-components/#global-style-overrides
I am new to react and trying to make an authentication page. I try to modify the template from MUI and the link is as below:
https://github.com/mui/material-ui/tree/master/docs/src/pages/premium-themes/onepirate
In the SignUp.js, I try to add more attributes like maxLength and default value. But they don't work. I am wondering what causes the issue.
I tried to handle the situation with JavaScript, but I am thinking if there is a simpler solution.
<Field
fullWidth
component={RFTextField}
disabled={submitting || sent}
required
name="password"
autoComplete="new-password"
label="Password"
type="password"
margin="normal"
value="abc" //Not working
maxLength="8" //Not working
/>
I have an input in Next, typescript. Maxlength does work but minlength doesn't work now. Does anyone how to validate this both?
Here's my code.
<input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
<button type="submit">Submit</button>
Your code is fine. However minlength works different than maxlength.
HTML maxlength prevents the user from typing keys more than the maxlength.
HTML minlength will let the user enter less keys compared to the requirement. After all, they need to be able to start from less chars to come up to more chars. That said the field will show an error if minlenght is not met.
Complete example
Use this component and press the enter key to play around with the input field:
export default function App() {
return (
<form>
<input type="text" placeholder="text" required={true} minLength={2} maxLength={10} />
<button type="submit">Submit</button>
</form>
);
}
Screenshots
Because its required:
Because minlenght is not met:
use can install Material ui Libraries npm install #material-ui/core Material ui Libraries
There have lots of components. use Textfield components . Using inputProps we set maxlength in textfield
<TextField inputProps={{ maxLength: 10 }} type="text" />
Material Ui Textfied Compoents
I am wondering what is the best way to center the Form.Label components inside my form. I am new to React and Bootstrap.
<Form>
<Styles>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
</Form>
I believe that adding "text-center" as your className in your Form.Label component should be enough.
<Form.Label className="text-center">Email</Form.Label>
You might not see the label "really" centered in the screen because of the width it has, but if you set a width, for example, of 100%, it should center in your screen.
For example,
<Form.Label className="text-center" style={{width: "100%"}}>Email</Form.Label>
If yo want to check the final result, it's here: https://codesandbox.io/s/agitated-dubinsky-n3von?fontsize=14
I am implementing an input form and I am hoping that it could have a fix line limit. For example, for one box, it would be a 3-line input box. If more than 3 lines, there will be ideally a scroll bar on y-axis (i.e., no overflow in x axis). My current code is
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>
but it only rendered one line's input.
Edited: using textarea, the font seems to be very tiny.
The following snippet fixes the described issue:
<Form.Group controlId="exampleForm.ControlTextarea1">
<Form.Label>Example textarea</Form.Label>
<Form.Control as="textarea" rows="3" />
</Form.Group>
The componentClass prop of a FormControl is "input" by default, which renders a text input.
A text input is single line.
So try setting the componentClass prop of FormControl to "textarea":
<Form>
<FormGroup>
<ControlLabel>
Label
</ControlLabel>
<InputGroup>
<FormControl componentClass="textarea" value='default' onChange={<some function>} />
</InputGroup>
</FormGroup>
</Form>