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

введите здесь описание изображения

заголовок отображается под полями ввода. 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>

material-design css angularjs angular-material
person Malik Muhammad Bilal Awan    schedule 28.05.2018    source источник
comment
but still facing the issue Какая проблема? Вы не задали вопрос   -  person StudioTime    schedule 28.05.2018
comment
Можете ли вы предоставить plunkr или любую другую демо-ссылку?   -  person Sravya Nagumalli    schedule 28.05.2018

Ответы (2)


arrow_upward
1
arrow_downward

Замените элемент <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>

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

person georgeawg    schedule 28.05.2018

arrow_upward
0
arrow_downward

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

person Giorgos Georgantas    schedule 28.05.2018