Search code examples
htmlcsstwitter-bootstrapcss-floatbootstrap-material-design

How to prevent floating-label to mix with input?

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:

enter image description here

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

enter image description here

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:

enter image description here

Any ideas?

Solution

  • 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:

    1. initialize with material.js:

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

    1. 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.