Помещение каждого входного элемента и группы меток в свои отдельные div, например, так:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="asd" type="text" name="sample1">
<label class="mdl-textfield__label" id="asd" for="sample1" style="color: indigo;">Username (Required)</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" name="sample2">
<label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
</div>
это то, что исправило это для меня, это может быть потому, что все дети div'ов абсолютно расположены, в любом случае, это должно выглядеть примерно так:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div id="signup">
<form action="#" >
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="asd" type="text" name="sample1">
<label class="mdl-textfield__label" id="asd" for="sample1" style="color: indigo;">Username (Required)</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" name="sample2">
<label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
</div>
</form>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" style="margin-bottom: 2em;">
Add (+)
</button>
</div>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
Конечно, если вы хотите, чтобы входные группы были сложены, а не рядом друг с другом, вы должны добавить селекторы в div, которые имеют более высокую специфичность, чем атрибут class, используемый mdl (если MDL не обеспечивает вы добавили имя класса, которое обеспечивает такую функциональность), поэтому я бы добавил атрибут id к каждому div, который я хочу изменить, например:
<div id="stacked" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="asd" type="text" name="sample1">
<label class="mdl-textfield__label" id="asd" for="sample1" style="color: indigo;">Username (Required)</label>
</div>
<div id="stacked" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" name="sample2">
<label class="mdl-textfield__label" for="sample2" style="color: indigo;">Email id (Required)</label>
</div>
Затем добавьте это в свой CSS:
#stacked {
display: block;
}