CODEWITHSUNDEEP
cssangularjsmaterial-designangular-material
Malik Muhammad Bilal Awan
Malik Muhammad Bilal Awan

Reputation: 32

Input title is shown below input fields in Material Design form

enter image description here

title is display below input fields css is fine but still facing the issue i just copy the sample code from 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>

Upvotes: 0

Views: 537

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Replace the <button> element with the <md-button> directive:

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

For more information, see AngularJS Material <md-button> API Reference.

Upvotes: 1

Giorgos Georgantas
Giorgos Georgantas

Reputation: 72

instead of , try to add a placeholder in for example <input type="email" ng-model="contactEmail" placeholder="Email:" required>

Upvotes: 0

Related Questions