Material Style Minimal - There is a slight space between the text field and the colored line at the bottom

Having a problem with Material Design Lite text field where there is a small gap between the bottom colored line and the gray starting line. Every MDL text field example I try on my page shows the same issue. What could be causing this locally? My frontend uses react.js.

Currently running version 1.2.1 of material design lite.

View the issue in the image: https://i.stack.imgur.com/BPdfO.png

Below is my code:

<div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input className="mdl-textfield__input" type="text"/>
        <label className="mdl-textfield__label" htmlFor="nameField">
            Your name
        </label>
</div>
javascriptmaterial-uimaterial-design-lite

Answer №1

I encountered a similar issue when using MDL with Bootstrap and discovered that the Bootstrap CSS file includes a 5px margin at the bottom for the Label element, resulting in a gap.

JSFiddle link to see problem replication

Snippet from Bootstrap.css file:

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: bold;
}

Solution: To fix this, simply reduce the margin-bottom of the label element to 0px.

Fix on JsFiddle

.mdl-textfield__label{  
   margin-bottom:0px;
 }

I hope this information proves useful in resolving the issue.

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

Issue with Vue Multiselect auto-suggestion functionality

I've been utilizing the [vue-multiselect] library for my project. [1]: https://www.npmjs.com/package/vue-multiselect. Within a form, I have multiple multiselect dropdowns. The issue I'm facing is with the browser's autocomplete feature. I&a ...

javascriptvue.jsautocompletemulti-selectvue-multiselect

Get the name of the array using JavaScript

Here is an example of my situation: var list1 = ['apple', 'banana', 'orange']; var list2 = ['carrot', 'lettuce', 'tomato']; When I use: alert(list1) I get: apple, banana, orange. This is corre ...

javascriptarraysalert

Unable to modify the name of an element's class due to restrictions in JavaScript

I am trying to switch the class of an element from score -box1 to score -box1.-active. I defined a constant $target in order to access the class score -box1, however it is not functioning as expected. const $target = document.getElementByClassname('sc ...

javascriptreactjsclasstoggle

AngularJS confirmation directive for deleting items

I am currently utilizing this directive for a confirmation prompt when deleting an app. However, regardless of whether I click cancel or yes, the app still gets deleted. <small class="btn" ng-click="delete_app(app.app_id)" ng-show="app.app_id" ng-con ...

javascripthtmlangularjs

Is there a way to customize the progress bar percentage in Ant design?

I am currently utilizing React JS and importing the Ant Design progress component (refer to https://ant.design/components/progress/). However, I am facing difficulties in dynamically editing the percentage of the progress bar using JavaScript after it has ...

javascriptreactjsprogress-barant-design-pro

Throttle the asynchronous function to guarantee sequential execution

Is it possible to use lodash in a way that debounces an async function so it runs after a specified delay and only after the latest fired async function has finished? Consider this example: import _ from "lodash" const debouncedFunc = _.debounc ...

javascriptnode.jstypescriptasync-awaitlodash

"Exploring the possibilities of integrating Typescript into Material-UI themes: A step-by

I'm experiencing some issues with Typescript pointing out missing properties in the palette section. Although adding //@ts-ignore resolves the problem temporarily, I would prefer to find a cleaner solution. As a newbie to Typescript, here is my attemp ...

javascriptreactjstypescriptmaterial-ui

Utilize jQuery to hide and then show elements based on text input

Recently, I came across a useful jQuery filter example that sparked my interest. To test it out, I created my live example and shared the code on CodePen (or you can check out the Fiddle if you prefer). One issue I encountered was that after entering text ...

javascriptjqueryhtmlcss

Step-by-step guide on transferring form data from an Ionic application to parse.com MBaaS through the REST API

Today is my first day with Ionic/Angular, and I'm diving in out of necessity. I've been using tutorials and documentation to create a demo/test app that submits data to the Parse.com MBaaS service. However, I seem to be stuck somewhere and clue ...

javascriptangularjsrestparse-platformionic-framework

Exploring the intricacies of React's useEffect: Solving the challenge of updating data when two separate dependency arrays are

I am facing an issue with two different useEffect hooks where the dependency arrays are different. const [dateFilterSort, setDateFilterSort] = useState({ queryText: initialQueryText(params.sortName), cardText: initialCardText(params.sortName), ...

javascriptreactjsuse-effect

JavaScript Object Featuring a Default Function Along with Additional Functions

I'm currently working on developing a custom plugin, but I've hit a roadblock at the initial stage. My goal is to create an object that can accept a parameter as its default and also include other functions within it. Below is an example of what ...

javascript

What is the process of integrating a mui theme color into a component?

Is there a way for me to import a Mui theme color in order to pass its value to a component? Could you provide guidance on how to properly import the color? const WonderChart = () => { return ( <WonderChart lineColor={theme.palette.primary.m ...

material-ui

Sending JavaScript array to PHP server-side script

In my current Web application project, I am faced with the task of working with two different lists. To achieve this, I need to convert the list into an array and then pass this array from JavaScript to PHP for further analysis. Below is a simplified exam ...

javascriptphpjqueryjsonajax

Is it possible to manipulate the response from a MySQL server using Node.js?

For example: The following response represents the original data { "todo_id": 2, "todo_item": "brush your teeth", "scheduled_time": "2020-03-22T07:14:29.000Z", "user_id": 1, "is_done": { "type": "Buffer" ...

javascriptnode.jsexpress

What are the advantages of using HttpClient compared to fetch?

With the introduction of Angular 2+, HttpClient now facilitates HTTP requests sent down an RxJS observable. I'm curious about why one would opt for using HttpClient's API instead of the standard fetch for individual HTTP requests. I have a good ...

javascriptangularpromiserxjsobservable

Having issues incorporating Redux into React Native application

Struggling to make a small app work in React Native with Redux. It was functioning fine without Redux, but after attempting to integrate Redux, it now shows a blank white screen and a loading message. I want to avoid using classes and stick to functional p ...

javascriptreactjsreact-nativereduxreact-redux

New to JavaScript and Bootstrap - eager to learn by using Bootstrap 4 Chart Template, just need help with a small issue in the code

I am eager to dive into Bootstrap 4 and data visualization charts. I want to replicate the visualizations found in the link below. However, after copying and pasting the code into Atom, it's not functioning as expected. I ensured that I copied the HT ...

javascripthtmlcssbootstrap-4

The directive for accepting only numbers is not functioning in versions of Chrome 49.xx.xx and earlier

I have implemented a directive in Angular 6 to allow only numbers as input for certain fields. The directive code is shown below: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[NumbersOnly]& ...

javascriptangulartypescriptinputangular-directive

Utilizing PHP Variables in Ajax Calls: Transferring Data between JS and PHP

I've been struggling to grasp how to pass information from PHP to JavaScript and vice versa. I've spent an entire night trying to figure this out and would really appreciate it if someone could help me understand how to send two variables to an a ...

javascriptphpjqueryajax

Remove the underline from links in gatsbyjs

When comparing the links on (check source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), they appear without an underline. However, on my blog (source code here: https://github.com/YikSanChan/yiksanchan.com), all links are un ...

javascriptreactjsgatsby