html – 当字段有效时,Angular Material形式收缩

2023年4月9日 200次阅读

我正在使用Angular Material作为联系表格.但是,当前两个元素中的任何一个和两个元素都变得有效时,表单的宽度会缩小.因此,当主题有效时,表单会缩小,当电子邮件变为有效时,表单会再次缩小.当表格是行和列时,表单会缩小.

我找到的一种方法是将flex放在表单元素上,但这会导致表单填充页面的整个宽度,这是不合需要的.我还在其上方和下方弯曲了形式和跨度元素,但它只是使形式比两个字段有效时更加压扁.

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

编辑

目前,我已经用CSS媒体查询解决了这个问题,但我不想这样做.

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

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

编辑

Codpen补充道

最佳答案 您正在使用开始中心布局 – 与列对齐.现在,在许多情况下,中心对齐会产生不良结果.所以最好使用< 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

点赞