Currently, I am utilizing MDBootstrap as my primary CSS framework and integrating redux forms to simplify form management.
The issue at hand is that the design and style of elements appear different compared to the original static html page layout.
Here is the design of the original HTML static page:
https://i.sstatic.net/gPh0A.png
Now, this is how the elements look when using the Redux forms Field component:
https://i.sstatic.net/nkGFC.png
The problem is perplexing as no errors are visible in the console, and all CSS/JS files are being loaded in the same manner:
HTML static page assets:
<link rel="stylesheet" type="text/css" href="http://booking.dev/all-b46c73cdcb.css">
<script src="http://booking.dev/all-fad333e91d.js"></script>
Redux page assets:
<link rel="stylesheet" type="text/css" href="http://booking.dev/all-b46c73cdcb.css">
<script src="http://booking.dev/all-fad333e91d.js"></script>
<!-- redux/webpack JS -->
<script async="" src="http://booking.dev/dist/bundle.js"></script>
Below is the code snippet being used:
Field component
export const renderInput = field => {
return (
<div className= "col-md-4">
<div className="md-form">
<span className="prefix"><i className={field.icon}></i></span>
<input
{...field.input}
type={field.type}
className={`form-control ${field.meta.touched && field.meta.invalid ? 'invalid' : 'valid'}`}
/>
<label id={field.input.name + 'Label'} htmlFor={field.input.name} className={field.meta.touched ? 'active' : ''} data-error={field.meta.error}
data-success="">{field.label}
</label>
</div>
</div>
);
}
Form section:
import React, {Component} from 'react';
import {Field} from 'redux-form'
import {renderInput} from '../../components/SingleInput'
export default class BookerInformation extends Component {
render() {
return <div className="booker-form">
<div className="thumbnail thumbnail-full cardbox booker-info">
<div className="caption">
<h4>Booker information</h4>
<div className="row">
<Field name="fullName" classname="col-md-4" icon="icon-User" component={renderInput}
label="Full Name"/>
<Field name="phone" classname="col-md-4" component={renderInput} icon="icon-Phone"
label="Phone"/>
</div>
<div className="row">
<Field name="email" classname="col-md-4" component={renderInput} icon="icon-Email"
label="E-mail"/>
</div>
<div className="row text-center">
<button type="button" className="btn btn-continue waves-effect waves-light">Continue</button>
</div>
</div>
</div>
</div>
}
}
Static HTML form element:
<div class="col-md-4">
<div class="md-form">
<span class="prefix"><i class="icon-User"></i></span>
<input type="text" id="name" class="form-control validate">
<label for="name" data-error="wrong" data-success="right" class="">Full name</label>
</div>
</div>