Utilizing Bootstrap 4.3.1 with React Components I currently have this image: https://i.sstatic.net/rudsE.png
And I am aiming for this design: https://i.sstatic.net/VmyTW.png
comments: {
elementLabel: "Comments",
elementType: 'textarea',
elementConfig: {
placeholder: '',
name: "comments",
id: "comments",
rows: 4
},
value: '',
form_value: "",
validation: {
},
valid: false,
touched: false,
isChanged: false,
errorMessage: "",
className: "form-control",
changed: (event) => this.inputChangedHandler(event, "comments"),
blured: (event) => this.inputBlurHandler(event, "comments")
},
Attempted the above changes in comments but no success so far.
<div className="form-row mb-3">
<div className="col-md-12">
<Input
{...this.state.comments}
/> </div>
</div>
This is also the scenario of my input component where textarea is being rendered.
case ('textarea'):
inputElement = (
<React.Fragment>
<label>{ReactHtmlParser(props.elementLabel)}</label>
<textarea
{...props.elementConfig}
className={inputClass}
value={props.value}
onChange={props.changed}
onBlur={props.blured}
/>
{
invalidClass || props.allowed_characters
?
<div className="form-row">
<div className={`col-md-10 text-left`}>
{invalidClass ? <span className="invalid-feedback">{props.errorMessage}</span> : null}
</div>
<div className="col-md-2 text-right">
{
props.allowed_characters ?
<span className="allowed_characters">{props.current_character_count} / {props.allowed_characters}</span>
: null
}
</div>
</div>
:
null
}
</React.Fragment>
)
Tried adding external SCSS but still no improvement, what should be the next step?