How to prevent floating-label to mix with input?

Question

I'm trying to use the Bootstrap Material design theme in which I now use a simple text input field with the following code:

<div class="form-control-wrapper">
    <input class="form-control empty" type="text"></input>
    <div class="floating-label">
        Title
    </div>
    <span class="material-input"></span>
</div>

which looks like this:

But when I put in some text, the text and the label mix:

Shouldn't the floating-label disappear? What am I doing wrong?

All tips are welcome!

[EDIT 2]

These are all my imports in my <head>:

<html ng-app="myApp">
<head>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <!-- Bootstrap -->
    <link src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- Bootstrap Material Design (https://github.com/FezVrasta/bootstrap-material-design) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/roboto.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.min.js"></script>

    <!-- Angular -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

    <!-- My own scripts -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

</head>
<body>

    <div ui-view></div>

</body>
</html>

and my main.html which I load using Angular:

<form novalidate>
    <div class="form-control-wrapper">
        <input class="form-control empty" type="text"></input>
        <div class="floating-label">
            Title
        </div>
        <span class="material-input"></span>
    </div>
</form>

[EDIT 3] For me the fiddle doesn't work either. I tried in both Chrome and Firefox. Both are up to date. Check it out:

Any ideas?

I think it's some kind of bug, try to send a pull request to github I think — AleshaOleg, Jul 31 '15 at 07:25
@AleshaOleg - For a pull request I first need to fix it.. :-) — kramer65, Jul 31 '15 at 07:27
@SaravananArunagiri - I added all scripts I load in my head to the initial question.. — kramer65, Jul 31 '15 at 07:27
ok check in console this script contains any error @kramer65 — Saravanan Arunagiri, Jul 31 '15 at 07:29
It is working correctly in fiddle https://jsfiddle.net/vvwdcd7z/ — Shrinivas Pai, Jul 31 '15 at 07:32
@kramer65 For me in Chrome everything working fine (https://jsfiddle.net/9aa52gt1), which browser are you use? — AleshaOleg, Jul 31 '15 at 07:33
@SrinivasPai - For me it doesn't work in that fiddle. Check the screenshot I added to my question. I'm on a mac. Does that matter at all? — kramer65, Jul 31 '15 at 07:43

score 1 · Accepted Answer · answered Oct 03 '15 at 18:04

You shouldn't hardcode the "empty" class on your input, instead of that, you should use the material.js script, which will build your DOM, and handle the "empty" css class.

You already imported material.js, so that's OK. The changes you need are:

initialize with material.js:

<script>
  $.material.init();
</script>

Clean up your DOM. Your form should look something like this:

<form novalidate>
<input type="text" class="form-control floating-label" placeholder="your label"/>
</form>

I hope this will help.

score 1 · Answer 2 · answered Mar 06 '18 at 21:17

1

I've made it so

  setTimeout(() => {
    $('.card-content input').change();
    $('.card-content textarea').change();
  }, 500);

answered Mar 06 '18 at 21:17

Pax Beach

2,059
1
20
27

Thanks, I did something similar for AngularJS in the init of my controller: `$(document).ready(function() { $('.form-control').change(); });` – Captain Fantastic Oct 08 '18 at 18:22

score 0 · Answer 3 · answered Dec 02 '20 at 11:41

function fixEmptyInputs() {
    $(':input.empty').each(function () {
        $(this).addClass('xempty');
        if ($(this).val() != undefined && $(this).val() != '') {
            $(this).removeClass('empty')
        } else {
            $(this).addClass('empty');
        }
    });
    $(':input.xempty').change(function () {
        if ($(this).val() != undefined && $(this).val() != '') {
            $(this).removeClass('empty')
        } else {
            $(this).addClass('empty');
        }
    })
}

$(document).ready(function () {
    fixEmptyInputs();
});
$(document).ajaxComplete(function () {
    fixEmptyInputs();
});

How to prevent floating-label to mix with input?

3 Answers3