here the verification code is not fitting in box.could someone suggest?
here is my code.
expecting that verification code fits in box col
here is my code:
<Form.Group className="mb-3" controlId='formBasicVerificationcode'>
<Form.Label>Enter verification code</Form.Label>
{/* <Form.Control
name="verificationcode"
required value={values.verificationcode}
onChange={handleChange}
isInvalid={!!errors.verificationcode}
/>
<Form.Control.Feedback type="invalid">
{errors.verificationcode}
</Form.Control.Feedback> */}
<OtpInput
inputStyle="inputStyle"
numInputs={numInputs}
isDisabled={isDisabled}
hasErrored={hasErrored}
errorStyle="error"
onChange={this.handleEmailOtpChange}
separator={<span>{separator}</span>}
isInputNum={false}
isInputSecure={isInputSecure}
value={emailotp}
placeholder={placeholder}
shouldAutoFocus
/>
Related
So basically i have a react application that i am creating and in it i have a page in which i am using the react-bootstrap library to create certain compnents.
Here i have a react regigtration form with bootstrap components and i have already installed all the libraries and this code works fine but the problem lies in the fact that when i run the page the styles dont show even though i have imported:
import "bootstrap/dist/css/bootstrap.min.css";
So if there is any way this can be fixed please do let me know.
Thanks!
Here is the code for react page:
import React from 'react';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import "bootstrap/dist/css/bootstrap.min.css";
const UploadBussiness = () => {
return (
<Form>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group as={Col} controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
</Row>
<Form.Group className="mb-3" controlId="formGridAddress1">
<Form.Label>Address</Form.Label>
<Form.Control placeholder="1234 Main St" />
</Form.Group>
<Form.Group className="mb-3" controlId="formGridAddress2">
<Form.Label>Address 2</Form.Label>
<Form.Control placeholder="Apartment, studio, or floor" />
</Form.Group>
<Row className="mb-3">
<Form.Group as={Col} controlId="formGridCity">
<Form.Label>City</Form.Label>
<Form.Control />
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Label>State</Form.Label>
<Form.Select defaultValue="Choose...">
<option>Choose...</option>
<option>...</option>
</Form.Select>
</Form.Group>
<Form.Group as={Col} controlId="formGridZip">
<Form.Label>Zip</Form.Label>
<Form.Control />
</Form.Group>
</Row>
<Form.Group className="mb-3" id="formGridCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>
)
}
export default UploadBussiness
There could be other issues, but according to react-bootstrap document, perhaps try include this import in App.js instead of the component file:
The following line can be included in your src/index.js or App.js file:
import 'bootstrap/dist/css/bootstrap.min.css';
I find the new React Docs (Beta) much more readable and helpful than the old React Docs. From the new React Docs (Beta):
React does not prescribe how you add CSS files. In the simplest case,
you’ll add a <link> tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.
So what John Li says in his answer is correct; he is directly quoting the React Bootstrap docs. However, you might also try adding the CSS directly to your HTML, which the React Bootstrap docs also recommends:
How and which Bootstrap styles you include is up to you, but the
simplest way is to include the latest styles from the CDN. A little more information about the benefits of using a CDN can be found here.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
If this works, then you'll also have a version of Bootstrap specified, which might be helpful to you later.
EDIT: I forgot to emphasize that, as the React Docs (Beta) recommends, you should consult the docs of whatever build tool (e.g. Vite) or framework (e.g. Create React App) you are using. If you aren't using a build tool or a framework, you're sort of on your own.
I would need to set the text of the Label, for the Formik Input Component, after the input field.
I am not sure how to target it and how to apply CSS.
So a code sample:
<div className="editable-job-title">
{isEditing ? (
<Formik
validateOnMount={true}
enableReinitialize
initialValues={user}
validationSchema={userNameValidationSchema}
onSubmit={handleSubmit}>
{(props) => (
<Form>
<Input
name="job_title"
type="text"
label={t('userForm.job_title.label')}
/>
<FormActions className="user-form-page__form-action">
<RoundButton
type="button"
onClick={stopEditing}
className="button button--cancel">
<Icon icon={x} />
</RoundButton>
</Form>
)}
</Formik>
So basically, I would need the Job Title text to be below the field.
Or any other nice solution.
I guess you want to use <Field> element from formik.
If this is the case, check it out on https://codesandbox.io/s/formik-tests-onchange-mo4fi?file=/src/App.js
import { Field, Formik, Form } from "formik";
import { TextField } from "#material-ui/core";
<Formik
initialValues={initialValues}
onSubmit={() => alert("submitted!")}
>
<Form>
<Field name="email">
{(props) => (
<>
<TextField
variant="outlined"
placeholder={props.field.name}
label={props.field.name}
{...props.field}
/>
</>
)}
</Field>
...
I tried to search for the answer but I am not getting anything to solve it.
I am loading my image using require.context as you can see in the code but it's not getting loaded. It used to work perfectly before in previous versions of react js. Now I am using react version 17.0.1. There are no errors in the console. If I import the image and use it in the src it works fine. I have also tried to change the images with some previous images used in previous projects (using react version 16.x.x) which are working fine there. I am creating react app using npx-create-react-app. Path to image is correct as in case of incorrect path "module named xxx not found error occurs".
Current behavior:
Image not showing up instead alt value is showing up.
Desired behavior:
Image should show up instead of alt value.
import React, { Component } from "react";
import commonStyles from "../css/common.module.css";
import loginStyles from "../css/login.module.css";
import { TextField, Button, Paper, Typography } from "#material-ui/core";
class Login extends Component {
state = {
userName: "",
password: "",
error: "",
};
render() {
const images = require.context("../images", true);
return (
<div
className={`${loginStyles.root} d-flex justify-content-center align-items-center ${commonStyles.bg}`}
>
<Paper
classes={{
root: `${commonStyles.paper} mt-2`,
}}
elevation={3}
>
<div className={`${loginStyles.child}`}>
<div className={`d-flex justify-content-center align-items-center`}>
<img
src={images(`./Shahmeer.png`)}
alt={`Shahmeer Avenue Logo`}
width="100"
height="100"
/>
</div>
<Typography
classes={{
root: `font-weight-bold`,
}}
variant="h5"
gutterBottom
>
Login
</Typography>
<form noValidate autoComplete="off">
<TextField
classes={{
root: `${commonStyles.textField}`,
}}
onChange={(e) => this.handleChange(e)}
id={"userName"}
label={"User Name"}
variant="outlined"
error={this.state.error ? true : false}
helperText={this.state.error}
value={this.state["userName"]}
/>
<TextField
classes={{
root: `${commonStyles.textField}`,
}}
onChange={(e) => this.handleChange(e)}
id={"password"}
label={"Password"}
variant="outlined"
error={this.state.error ? true : false}
helperText={this.state.error}
value={this.state["password"]}
/>
<div className={`w-100 d-flex justify-content-end mt-2`}>
<Button variant="contained" color="primary">
Login
</Button>
</div>
</form>
</div>
</Paper>
</div>
);
}
}
export default Login;
snapshot of browser:
You should use the default property for the images:
<img
src={images(`./Shahmeer.png`).default}
alt={`Shahmeer Avenue Logo`}
width="100"
height="100"
/>
I am trying to get my text area to display with row height recognition. I've followed several of the suggestions that have been made on this board.
I currently import componentClass from react-bootstrap and in my form field, I have:
<div className="form-group">
<label htmlFor="overview">Outline your proposal</label>
<Field
name="overview"
componentClass="textarea"
rows={4}
className={
"form-control" +
(errors.overview && touched.overview ? " is-invalid" : "")
}
/>
<ErrorMessage name="overview" component="div" className="invalid-feedback" />
</div>
It still renders in a single line.
What is the hidden secret about making this work with row numbers for text area?
I'm using Meteor + ReactJS and I'm pulling Material-UI via node modules.
<RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
<RadioButton value="light" label="Simple" style={styles.radioButton} />
<RadioButton value="not_light" label="Selected by default" style={styles.radioButton} />
<RadioButton value="ludicrous" label="Disabled" disabled={true} style={styles.radioButton} />
</RadioButtonGroup>
Here is what it renders.
But it won't change values like it's supposed to do on click. It just stays static.
Check the below example. You have to pass valueSelected and onChange props to RadioButtonGroup to get the values of RadioButton. In onChange function set the selected value in state and pass that state to valueSelected that’s all. As simple as that.
<RadioButtonGroup
valueSelected={this.state.cranRadio}
onChange={this.handleCRAN}
style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-between" }}
name="coin"
defaultSelected="not_light"
>
<RadioButton
value="Yes"
label="Yes"
inputStyle={styles.inputStyle}
style={{ width: "auto" }}
labelStyle={{ marginLeft: "-10px" }}
/>
<RadioButton
value="No"
label="No"
style={{ width: "auto" }}
inputStyle={styles.inputStyle}
labelStyle={{ marginLeft: "-10px" }}
/>
</RadioButtonGroup>;
I maybe having similar issue with Checkbox.
If i provide a handler, then the checkbox is not showing 'tick' when checked. Without handler, the check shows with ripple effect.
import mui from 'material-ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
...
<mui.Checkbox
label="Employed"
name="Employed"
labelPosition="left"
style={fstyles.checkbox}
onCheck={props.cb}
/>
If I dont provide the onCheck, then the check shows.. should the handler return some value? currently it sets my top level component's state . I tried returning true, but did not help.