Search code examples
javascriptcssreactjsreduxredux-form

Redux forms doesn't use preloaded CSS/JS

I am using MDBootstrap as my frontend CSS framework and redux forms for easy form control.

Problem that I have is that elements style/design is different from originally created in static html page.

This is original HTML static page design:

Original static html example

And this is result when using Redux forms Field component

Redux form example

I am not sure how and why this problem occurs. There is no error in console and all CSS/JS are loaded exactly same way:

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>

And this is code i am using:

Field componenet

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

  • It was my error. I forgot to add type ( type="text") to react fields which resulted incorrect styling. After adding correct type everything worked as it should.

    Working Redux form field example:

     <Field name="fullName" classname="col-md-4" type="text" icon="icon-User" component={renderInput}
       label="Full Name"/>