Geek Answers Handbook

Angular The shape of the material shrinks when the field is really

I am using Angular Material for the contact form. However, when both of the top two elements become valid, the shape contracts in width. Therefore, when the subject is valid, the form is compressed, and when the email becomes valid, the form is compressed again. A form is compressed when it is a row and a column.

One of the ways I found is to overlay a flex element on the form element, but then it forces the form to fill the entire width of the page, which is undesirable. I also bent the shape and range elements above and below, but it just makes the shape more curled than when the two fields are valid.

<div layout="column" layout-gt-md="row" layout-align="start center" layout-align-gt-md="center start">
<form name="contactForm">
    <div layout="row" layout-align="space-between center">
        <div>
            <h3>Contact Form</h3>
            <span>Fill out the contact form to send me an email.</span>
        </div>
    </div>
    <div layout-gt-md="row">
        <md-input-container class="md-block" flex>
            <label>Subject</label>
            <input minlength="5" md-maxlength="30" required name="subject" ng-model="contact.subject" />
            <div class="hint">Give your message a subject.</div>
            <div ng-messages="contactForm.subject.$error">
                <div ng-message-exp="['required', 'minlength', 'maxlength']">The subject has to be between 5 and 30 characters long.</div>
            </div>
        </md-input-container>
        <div flex="5" show-gt-md>
            <!-- Spacer //-->
        </div>
        <md-input-container class="md-block" flex>
            <label>Client Email</label>
            <input required name="email" ng-model="contact.email"
                   minlength="10" md-maxlength="100" ng-pattern="/^.+@.+\..+$/" />
            <div class="hint">What email should I reply to?</div>
            <div ng-messages="contactForm.email.$error">
                <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                    Your email must be between 10 and 100 characters long and be a valid email address.
                </div>
            </div>
        </md-input-container>
    </div>
    <div layout-gt-md="row">
        <md-input-container class="md-block" flex>
            <label>Body</label>
            <textarea name="body" ng-model="contact.body" required minlength="15" md-maxlength="1500" rows="5"></textarea>
            <div class="hint">What would you like to message me about?</div>
            <div ng-messages="contactForm.body.$error">
                <div ng-message-exp="['required', 'minlength', 'maxlength']">The body must be between 15 and 1500 characters long.</div>
            </div>
        </md-input-container>
    </div>
    <div layout-gt-md="row">
        <span flex></span>
        <md-button class="md-raised" ng-disabled="contactForm.$invalid"><md-icon class="material-icons">mail_outline</md-icon>Send</md-button>
    </div>
</form>
</div>

EDIT

I have currently solved the problem with CSS queries, but I would prefer not to.

@media screen and (min-width: 960px) {
    form {
        width: 610px;
    }
}

@media screen and (max-width: 959px) {
    form {
        width: 400px;
    }
}

EDIT

Codpen added

+4
1

start center layout-align column. center . <span flex></span> require. .

 <div layout="row">
    <span flex></span>
    <div>
      <h3>Contact Form</h3>
      <span>Fill out the contact form to send me an email.</span>
    </div>
    <span flex></span>
  </div>

, , . http://codepen.io/next1/pen/YqRVWo

+1

More articles:


All Articles