Question

我已经尝试了各种各样的柔性，布局包装，我能想到的所有棱角分明的材料。

我无法弄清楚如何使这些输入均匀分布。

我认为问题是每个输入都在md-input-container中，我不能将md-datepicker放在一个中，因为它为用户提供了两行输入。

如果有人能让我知道如何将它们均匀地分开，那真的很棒！

<form name="formData" action="http://localhost:3000/senddata" method="POST">
<md-input-container class="md-block" >
    <label><i class="material-icons">face</i>&nbsp;&nbsp; Name</label>
    <input type="text" name="name" ng-model="$ctrl.name"/>
</md-input-container>
<md-input-container class="md-block">
    <label><i class="material-icons">explore</i>&nbsp; &nbsp; Zip Code</label>
    <input required type="text" name="zipCode" ng-model="$ctrl.zipCode" ng-minlength="5" pattern="^\d{5}(?:[-\s]\d{4})?$"/>
    <div ng-messages="formData.zipCode.$error" style="color:red;" role="alert">
        <div ng-message="required">This field is required!</div>
        <div ng-message="minlength">Minimum length is 5</div>
    </div>
</md-input-container>
    <md-datepicker ng-model="$ctrl.myDate" class="md-block md-datepicker-focused" md-placeholder="Enter date" required md-max-date="$ctrl.maxDate"></md-datepicker>
<md-input-container class="md-block">
    <label><i class="material-icons">search</i>&nbsp; &nbsp;Search:</label>
    <input type="text" name="search" ng-model="$ctrl.search" required/>
    <div ng-messages="formData.search.$error" style="color:red" role="alert">
        <div ng-message="required">This field is required!</div>
    </div>
</md-input-container>
<md-button class="md-raised md-primary" ng-disabled="formData.$invalid" ng-click="$ctrl.getData()" style="float:right;">Submit
</md-button>

Answer 1

我知道这已经快两个月了，但是想让你知道这应该在Angular Material 1.1.0中修复，它已于2016-08-14正式发布。

Datepicker didn't used to work well with md-input-container。如果你很好奇，你也可以read the commit with the fix。

与md-input-container＆md-datepicker

1 个答案: