Question

我使用了Anng JS材质输入框，输入框的宽度有点小。我想增加它。尝试了很多解决方案。但是没有用。这是我的代码。

  <md-input-container class="md-block">
    <label>Address</label>
    <input type="text" name="address"  ng-model="mgAddress.model.address" value="{{address}}" required/>
    </div>
  </md-input-container>

<md-button class="md-raised md-primary" ng-click="$manageAddressController.submitAddress(mgAddress.model.address)" ng-disabled="manageAddressForm.$invalid || manageAddressForm.$pristine">Add</md-button>

Answer 1

您可以使用flex directive使元素占据父卷的宽度或拉伸以占用剩余空间。根据{{3}}

，元素将拉伸以水平或垂直填充父容器

<md-input-container class="md-block" flex>
    <label>Address</label>
    <input type="text" name="address"  ng-model="mgAddress.model.address" value="{{address}}" required/>
</md-input-container>
<md-button class="md-raised md-primary" ng-click="$manageAddressController.submitAddress(mgAddress.model.address)" ng-disabled="manageAddressForm.$invalid || manageAddressForm.$pristine">Add</md-button>

编辑：

文档示例：

<!-- Parent wrapper which specifies the layout as row -->
<div layout="row">
  <!-- Flex directive on the child -->
  <md-input-container class="md-block" flex>
    <label>Company (Disabled)</label>
    <input ng-model="user.company" disabled>
  </md-input-container>
</div>

Answer 2

您可以使用css来设置输入元素的样式。这里我使用内联样式作为百分比来设置输入框的宽度。您也可以使用其他指标（像素等..）来设置宽度。

<md-input-container class="md-block">
 <label>Address</label>
 <input type="text" style="width:120%" name="address" ng-model="mgAddress.model.address" value="{{address}}" required/>
</md-input-container>

Answer 3

<div class="col-12" style="padding-right: 700px;" >
      <div class="form-group">
          <label>Address</label>
          <input type="text" name="address"  ng-model="mgAddress.model.address" value="{{address}}" required/>
      </div>
</div>

您可以简单地使用style =“ padding-right：700px;”。如果要将右侧文本框的大小设置为700px。

如何更改Angular JS材质输入框宽度

3 个答案: