フィールドが有効なときに角張った材質の形状が小さくなる

Question

私は接触フォームに角材を使用しています。しかし、上位2つの要素のどちらか、そして両方が有効になると、フォームは幅が縮小します。したがって、件名が有効な場合はフォームが縮小し、メールが有効になるとフォームは再び縮小します。フォームは行と列のときに縮小されます。

私は見つけましたが、これはフォーム要素にflexを置くことですが、それはフォームが望ましくないページの幅全体を埋める原因になります。私はまたフォームを撓ませて上下の要素を上下させましたが、2つのフィールドが有効な場合よりもフォームをより盛り上がらせるだけです。

<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

は今のところ、私はCSSメディアクエリの問題を解決してきたが、私はこれを行うには持っていない好むだろう。

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

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

EDIT

Codpenはあなたがstart centerレイアウト揃えるcolumnとを使用している

Answer 1

を追加しました。多くの場合、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