1 year ago

#376259

test-img

Bharath Bellamkonda

adjust the size of rendered component OtpInput in react bootstrap

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
                                                        />

grid

rendering

react-bootstrap

react-props

adjustment

0 Answers

Your Answer

Accepted video resources