Material-ui: Unexpected Double-Underline Under TextField?

[VikR0001]

Problem description

In Mac OSX Chrome, I'm getting a double-underline under the TextField instead of the expected single-underline:

Steps to reproduce

import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import injectTapEventPlugin from 'react-tap-event-plugin';
import TextField from 'material-ui/TextField';
injectTapEventPlugin();

const lightMuiTheme = getMuiTheme(lightBaseTheme);

class Layout extends React.Component {
    render() {
        return (
            <MuiThemeProvider muiTheme={lightMuiTheme}>
                <div>
                    <TextField
                        hintText="Email"
                    />
                </div>
            </MuiThemeProvider>
        );
    }
}
export default Layout;

Versions

• Material-UI: [email protected]
• React: [email protected]
• Browser: Mac OSX Chrome Version 50.0.2661.102 (64-bit)

[mbrookes]

Do you have any other css stylesheet / reset in use?

[VikR0001]

I do not. All of my styles are inline. In this tiny test example, there are no styles other than what is included in lightBaseTheme.

[mbrookes]

Looks fine here using your code (tested in Chrome 50 & 51, on OS X), so there's something else going on in your app.

[VikR0001]

Good info! I will investigate further.

[mbrookes]

@VikR0001 Just curious, what was the problem in the end?

[pricetula]

I encountered the same issue on a meteor project!! Deleting an existing materialize.css file solved the issue.

[VikR0001]

@mbrookes, I spent a lot of time this weekend on it and I may have tracked it down. It appears that the npm package babel-plugin-transform-class-properties may be what causes the bug.

When I include babel-plugin-transform-class-properties, I have the double-underline anomaly. When I remove it (as well as the kind of js statements that require it for purposes of compilation), the anomaly is gone.

[VikR0001]

I tried to create a tiny test app to send to you to demonstrate the bug. But in the tiny test app, the double underline bug did not appear, even when that package was in use. So I guess something in my code, or in another package, was interacting with that package to cause the bug.

[dcarneiro]

I had the same problem. It disappear if I removed the css import line from index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

Without it I loose the Grid styles from materializecss though

[buddythumbs]

I found this happening when I loaded a custom boostrap (paper=[material clone]) theme.

I commented out the following lines in my theme.min.css (bootstrap) file and the double colored line went away (there is still a horizontal rule there that I need to hunt down though)

.navbar-inverse .navbar-form input[type=password],.navbar-inverse .navbar-form input[type=text]{color:#fff;-webkit-box-shadow:inset 0 -1px 0 #eee;box-shadow:inset 0 -1px 0 #eee} .navbar-inverse .navbar-form input[type=password]::-moz-placeholder,.navbar-inverse .navbar-form input[type=text]::-moz-placeholder{color:#eee;opacity:1} .navbar-inverse .navbar-form input[type=password]:-ms-input-placeholder,.navbar-inverse .navbar-form input[type=text]:-ms-input-placeholder{color:#eee} .navbar-inverse .navbar-form input[type=password]::-webkit-input-placeholder,.navbar-inverse .navbar-form input[type=text]::-webkit-input-placeholder{color:#eee} .navbar-inverse .navbar-form input[type=password]:focus,.navbar-inverse .navbar-form input[type=text]:focus{-webkit-box-shadow:inset 0 -2px 0 #fff;box-shadow:inset 0 -2px 0 #fff}

This issue is not seen when I remove the bootstrap theme from the project - however then I lose all styling so this is not really an option either

[mukkachaitanya]

Any updates on the issue? I am also having the same issue.

[jjm552]

Found this on another post:
<TextField hintText="Hint Text" underlineStyle={{display: 'none'}} />
https://github.com/callemall/material-ui/issues/2475

I added ' underlineStyle={{display: 'none'}}' inline and that removed the extra line

[mukkachaitanya]

Hey @jjm552, that removes the actual line produced by the TextField and leaves the extra double line which looks ugly in my setup.

[rsispal]

I'm having this issue in my React app. It seems to be react-materialize (which I use for the grid) that is causing this second green underline, but I haven't been able to override it's CSS yet. It isn't present on the DOM until the field is active.

Doesn't look good.

[nave7693]

Materialize css adds the extra underline with this style in _input_fields.scss:

 Focused input style
  &:focus:not([readonly]) {
    border-bottom: 1px solid $input-focus-color;
    box-shadow: 0 1px 0 0 $input-focus-color;
  }

I put this in my own custom stylesheet to disable it:

input:focus:not([read-only]) {
    border-bottom: none!important;
    box-shadow: none!important; 
} 

Source: StackOverflow

[kamarajuPrathi]

@VikR0001 any update on this issue , i dont see any solution above

[kevinguard]

Why is this ticket closed? I am having this issue and I actually don't use materialize.css at all. Thoughts?

[SameeraMadushan]

i'm having same issue for password field. :( is there anyone who solved this?

[sarayE]

I had the same issue --> found that the 'materialize.min.css' caused it.
Remove the link from the index.html

[dsandi]

Having this issue only on the password field

[Vikash2402]

Hi All,
I am also facing same issue, while adding materialize-css.
I didn't find any proper solution in above conversation then why this issue is close ?

[lalithenqos]

Hi All,
I am also facing the same issue,
-'Removing css link from index.html' does not fix this.

• If we fix using CSS, then it will further make bad UI when showing the errorText under the textfield.

Can someone pleae help me on fixing this issue ?

[pauloalexandre3d]

Hi, this worked:

<TextField... InputProps={{ disableUnderline: true, }} />

[micsel]

The below worked for me

.yourclass input{ border:none!important; box-shadow: none!important; outline: none!important; background: none!important; } .yourclass input:focus{ border:none!important; box-shadow: none!important; outline: none!important; background: none!important; }

[bleuscyther]

If you are importing Bootswatch Theme for Bootstrap as mentionned by @buddythumbs this will generate the double line.

So in order to remove it you can encapsulate the import:

.bootstrap {
  @import "~bootswatch/dist/materia/variables";
  @import "~bootstrap/scss/bootstrap.scss";
  @import "~bootswatch/dist/materia/bootswatch";
}

So if you want to use alert for example the parent has to have the class .bootstrap:

<div class="bootstrap">
    <div *ngFor="let sheet of match_errors" class="alert  alert-danger">
        <strong>Error</strong>
        <p>Working now...</p>
    </div>
</div>

[kelzuriel]

I'm having the same issue on v3-9-0, why is this closed I don't see a working answer.

[eps1lon]

I'm having the same issue on v3-9-0, why is this closed I don't see a working answer.

The original author closed this. Probably because they figured it out.

Could you open a new issue and fill out the template? 3.x is quite ahead of 0.15.

[filipkroca]

In my case it was caused by materialize css. I solved it by finding css:
input:not([type]), input[type='text']:not(.browser-default), input[type='password']:not(.browser-default), input[type='email']:not(.browser-default), input[type='url']:not(.browser-default), input[type='time']:not(.browser-default), input[type='date']:not(.browser-default), input[type='tel']:not(.browser-default), input[type='number']:not(.browser-default), input[type='search']:not(.browser-default)

and adding a selector :not([class*='Mui']):

input:not([type]):not([class*='Mui']), input[type='text']:not(.browser-default):not([class*='Mui']), input[type='password']:not(.browser-default):not([class*='Mui']), input[type='email']:not(.browser-default):not([class*='Mui']), input[type='url']:not(.browser-default):not([class*='Mui']), input[type='time']:not(.browser-default):not([class*='Mui']), input[type='date']:not(.browser-default):not([class*='Mui']), input[type='tel']:not(.browser-default):not([class*='Mui']), input[type='number']:not(.browser-default):not([class*='Mui']), input[type='search']:not(.browser-default):not([class*='Mui']) {

[hc-planning]

Hola, esto funcionó:

<TextField... InputProps={{ disableUnderline: true, }} />

si funciono pero el variant="outlined" persiste la linea