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

概述我正在使用Angular Material作为联系表格.但是,当前两个元素中的任何一个和两个元素都变得有效时,表单的宽度会缩小.因此,当主题有效时,表单会缩小,当电子邮件变为有效时,表单会再次缩小.当表格是行和列时,表单会缩小. 我找到的一种方法是将flex放在表单元素上,但这会导致表单填充页面的整个宽度,这是不合需要的.我还在其上方和下方弯曲了形式和跨度元素,但它只是使形式比两个字段有效时更加压 @H_419_6@ 我正在使用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  flex>            <label>Subject</label>            <input minlength="5" md-maxlength="30" required name="subject" ng-model="contact.subject" />            <div >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  flex>            <label>ClIEnt Email</label>            <input required name="email" ng-model="contact.email"                   minlength="10" md-maxlength="100" ng-pattern="/^.+@.+\..+$/" />            <div >What email should I reply to?</div>            <div ng-messages="contactForm.email.$error">                <div ng-message-exp="['required','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  flex>            <label>Body</label>            <textarea name="body" ng-model="contact.body" required minlength="15" md-maxlength="1500" rows="5"></textarea>            <div >What would you like to message me about?</div>            <div ng-messages="contactForm.body.$error">                <div ng-message-exp="['required','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  ng-Disabled="contactForm.$invalID"><md-icon >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

总结

以上是内存溢出为你收集整理的html – 当字段有效时,Angular Material形式收缩全部内容，希望文章能够帮你解决html – 当字段有效时,Angular Material形式收缩所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。