Reduxforms does not rely on preloaded CSS or JavaScript

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>

Answer №1

My mistake was not including the type attribute ( type="text") in the react fields, which caused incorrect styling. Once I added the correct type, everything functioned correctly.

Here is an example of a working Redux form field:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the concept of a framework operating "on top of" node.js in a way that would be easy for a beginner to understand?

If someone is new to JavaScript, how would you explain the concept of "on top of node.js" in simple programming language? I am looking for a general explanation as well as specific reference to Express on top of node.js in the MEAN stack. Appreciate your ...

Space between elements in a horizontal arrangement

While working with Bootstrap 5 and using paddings in columns, I encountered issues when some of my columns had backgrounds or when adding an embed element. How can I create margins in such cases? https://i.sstatic.net/EhF7y.png To address this issue, I i ...

Overlaying div above vimeo player

I'm attempting to overlay a div on top of a Vimeo video, a task I anticipated would be straightforward but turns out to be more complex than expected. Below is the HTML code snippet: <div id="wrap"> <iframe id="video" s ...

What could be the reason for the malfunction of this AngularJS data binding feature?

I am trying to create an angularjs filter that outputs HTML, similar to what is discussed in the link, but I am encountering issues. In my HTML code, I have: <ul> <li ng-repeat="book in books | filter:query"> {{book.title}} ...

Angular - Automatically update array list once a new object is added

Currently, I'm exploring ways to automatically update the ngFor list when a new object is added to the array. Here's what I have so far: component.html export class HomePage implements OnInit { collections: Collection[]; public show = t ...

Discover the Steps to Navigate a Mobile App Installed on Your Phone Directly from Your Browser

Looking for a way to navigate to my React Native apps using two different scenarios. I have developed web apps with ReactJS. If the mobile app is not installed and I enter an URL like "https://mywebpage.com" in the mobile browser, it redirects to the Goo ...

What is the best way to reset Owl Carousel following an ajax request?

I am attempting to reinitialize the owl carousel following a successful ajax call. The ajax call will update the data while retaining the same view. I am encountering an issue where the carousel structure in the view does not reinitialize, and I am unsure ...

What is the best way to show my button only when within a specific component?

Is there a way to display the Logout button on the same line as the title only when the user has reached the Home component? In simpler terms, I don't want the logout button to be visible all the time, especially when the user is at the login screen. ...

The fixed element alters its color when applied to a specific class within a div

I have a button with an icon and text that remains fixed on my webpage. The background colors of the sections change as you scroll through them, alternating between dark and light. I am looking for a solution where I can apply a class to multiple section ...

Utilizing JavascriptExecutor to assign attribute based on name

When working with HTML that lacks an id and only has name, class, and tag attributes, it can be challenging to manipulate it using JavascriptExecutor. The name attribute is unique, while the other two attributes are common among various other elements in t ...

The Thinkster.io MEAN Stack guide: A blank "post" appears on the homepage. What is causing this and how can I remove it?

Currently, I am immersed in the MEAN Stack tutorial provided by Thinkster.io. At this stage, I am integrating the node.js backend with the Angularjs frontend. The functionality includes data persistence for users to add posts and upvote them. However, an ...

What is the reason behind the sudden "explosion" in this simulation?

Trying to create a simulation of a steerable vehicle, like a plane, hovercraft, or boat, in either a gas or liquid fluid (such as air or water). The JavaScript code is based on the 3D rigid body airplane simulator from Physics for Game Developers, adapted ...

The appearance of HTML dropdown select options is unappealing when viewed on iPhones

Looking for a simple alternative to the dropdown menu implementation on iPhones/iOS for a mobile website (not native app). Any suggestions using HTML/CSS/JavaScript? <!DOCTYPE html> <html> <head> <meta name="viewport" content="initi ...

Answer processing for the reminder dialog is underway

When I send a proactive message to a user, I want to initiate a 'reminder dialog'. The dialog is displayed, but when processing the response it goes back to the main dialog. This is how I currently set up my bot: const conversationState = new C ...

creating dynamic column headers with JavaScript

I am looking for a way to make the column names dynamic so that I don't have to manually update them every time. Here is my code snippet: jqGrid11.prototype = { display : function() { $('body').append(this.html.join("")); $("#jqGrid").j ...

What is the best way to dynamically update the endpoint URL in a React class Component by passing a prop?

I am trying to fetch the necessary data for creating a chart by using the following URL (endpoint). How can I dynamically complete the URL with the required symbol from outside the class? Code: export default class HighLowChart extends Component{ con ...

The hyperlink does not function properly when included within an <input type=button> element

I have encountered an issue with the code below. In my project, I have a search bar along with some buttons. Currently, only the hyperlink of the search button is functioning correctly. The other buttons seem to redirect to the same link as the search bu ...

Dealing with errors such as "Failed to load chunk" can be resolved by implementing lazy-loading and code-splitting techniques

Our team is currently working on a Vue.js application using Vue CLI 3, Vue Router, and Webpack. The routes are lazy-loaded and the chunk file names include a hash for cache busting purposes. So far, everything has been running smoothly. However, we encoun ...

Replacing a string using Regular Expression based on certain conditions

When working with a node.js server, I encountered the need to modify URL addresses using JavaScript in a specific way: For instance: hostX/blah/dir1/name/id.js?a=b --> name.hostY/dir2.js?guid=id&a=b Another example: hostZ/dir1/name/id.js --> ...

Angular unable to register service worker

Looking to implement push notifications in my Angular app using vanilla JavaScript instead of the Angular service worker or @angular/pwa. In angular.json, I've specified the path to the js file under the script option. However, when the service worke ...