Заголовок ввода отображается под полями ввода в форме Material Design

Question

заголовок отображается под полями ввода css в порядке, но все еще сталкивается с проблемой, я просто скопирую пример кода из https://www.bossable.com/1745/angularjs-material-design-contact-form/

<div flex layout="row" layout-align="center center">
    <div flex-sm="100" flex-gt-sm="90" flex-gt-md="70" flex-gt-lg="50" class="md-whiteframe-z2">
        <md-content class="md-padding">
            <div flex-sm="100" flex-gt-sm="80" layout-sm="column">
                <form name="contactForm" data-ng-submit="sendMail()">
                    <md-input-container>
                        <label>Name:</label>
                        <input ng-model="contactName" required>
                    </md-input-container>
                    <md-input-container flex>
                        <label>Email:</label>
                        <input type="email" ng-model="contactEmail" required>
                    </md-input-container>

                    <md-input-container>
                        <label>Message:</label>
                        <textarea ng-model="contactMsg" columns="1" md-maxlength="150" required></textarea>
                    </md-input-container>

                    <button type="submit">Send</button>
                </form>
            </div>
        </md-content>
    </div>
</div>

Answer 1

Замените элемент <button> директивой <md-button>:

<div flex layout="row" layout-align="center center">
    <div flex-sm="100" flex-gt-sm="90" flex-gt-md="70" flex-gt-lg="50" class="md-whiteframe-z2">
        <md-content class="md-padding">
            <div flex-sm="100" flex-gt-sm="80" layout-sm="column">
                <form name="contactForm" data-ng-submit="sendMail()">
                    <md-input-container>
                        <label>Name:</label>
                        <input ng-model="contactName" required>
                    </md-input-container>
                    <md-input-container flex>
                        <label>Email:</label>
                        <input type="email" ng-model="contactEmail" required>
                    </md-input-container>

                    <md-input-container>
                        <label>Message:</label>
                        <textarea ng-model="contactMsg" columns="1" md-maxlength="150" required></textarea>
                    </md-input-container>

                    ̶<̶b̶u̶t̶t̶o̶n̶ ̶t̶y̶p̶e̶=̶"̶s̶u̶b̶m̶i̶t̶"̶>̶S̶e̶n̶d̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
                    <md-button type="submit" class="md-primary"
                        ng-class="{'md-raised md-hue-1': (contactForm.$dirty && contactForm.$valid) }"
                        aria-label="Send">Send</md-button>
                </form>
            </div>
        </md-content>
    </div>
</div>

Для получения дополнительной информации см. Материал AngularJS <md-button> Справочник по API .

Answer 2

вместо, попробуйте добавить заполнитель, например, <input type="email" ng-model="contactEmail" placeholder="Email:" required>