Question

我创建了一个注册表单，作为我学习Angular和Nodejs的一部分。我的表单看起来很宽，但没关系，但是这个表单上的字段看起来很窄或很薄。我试图将Width：100％直接设置为容器标签但不起作用。

如何使用css标记为所有这些字段设置宽度：100％？

我使用angular的形式：

<mat-card>
  <mat-card-header>
    <mat-card-title>
      <h4>Register New User</h4>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content class="register-container">
    <form>
      <mat-form-field>
        <input matInput placeholder="E-mail" ng-model="data.email" type="email">
      </mat-form-field>
      <br />
      <mat-form-field>
        <input matInput placeholder="Password" ng-model="data.pwd" type="password">
      </mat-form-field>
      <br>
      <mat-form-field>
        <input matInput placeholder="Name" ng-model="data.name" type="text">
      </mat-form-field>
      <br>
      <mat-form-field>
        <textarea matInput ng-model="data.description" placeholder="Leave a comment"></textarea>
      </mat-form-field>
    </form>
  </mat-card-content>
</mat-card>

Answer 1

这很好用。

mat-form-field {
  width: 100%;
}

Live demo

Answer 2

您也可以这样做。

  <mat-form-field [style.width.%]="100"></mat-form-field>

这也将有助于根据组件的属性有条件地设置样式值。

 <mat-form-field [style.width.%]="fullWidth? '100' : '50'"></mat-form-field>

Answer 3

虽然mat-form-field选择器有效且工作正常，但SonarQube和其他代码质量工具会在自定义选择器上发出警告。

我的建议是使用其类名而不是组件标签来钩住表单字段

.mat-form-field{ width: 100%; }

Answer 4

如果使用flexLayout，则可以使用fxFlex来设置所需的大小，如下面的代码所示：

class LinearRegressionGD(object):
    def __init__(self, eta = 0.001, n_iter = 20):
        self.eta = eta
        self.n_iter = n_iter

    def fit(self, X_train_std, y):
        self.w_ = np.zeros(1+X_train_std.shape[1])
        self.cost = []

        for i in range(self.n_iter):
            output = self.net_input(X_train_std)
            errors = (y - output)
            self.w_[1:] += self.eta * X_train_std.T.dot(errors)
            self.w_[0] += self.eta * errors.sum()
            cost = (errors**2).sum() /2.0
            self.cost_.append(cost)
        return self

    def net_input(self,X_train_std):
        return np.dot(X_train_std, self.w_[1:]) + self.w_[0]
    
    def predict(self, X_train_std):
        return self.net_input(X_train_std)


lr = LinearRegressionGD()
lr.fit(X_train_std, y)



---------------------------------------------------------------------------
    ValueError                                Traceback (most recent call last)
    
    <ipython-input-24-29cc349fb131> in <module>()
          1 lr = LinearRegressionGD()
    ----> 2 lr.fit(X_train_std, y)
    
    3 frames
    
    /usr/local/lib/python3.6/dist-packages/pandas/core/ops/__init__.py in to_series(right)
        637             if len(left.columns) != len(right):
        638                 raise ValueError(
    --> 639                     msg.format(req_len=len(left.columns), given_len=len(right))
        640                 )
        641             right = left._constructor_sliced(right, index=left.columns)

Answer 5

我曾经遇到过同样的问题，这是我的解决方法。

为要编辑的字段的容器使用标识符。例如，我将使用sopi这个词。

    <mat-card id="sopi">
      <mat-card-header>
        <mat-card-title>
          <h4>Register New User</h4>
        </mat-card-title>
      </mat-card-header>
      <mat-card-content class="register-container">
        <form>
          <mat-form-field>
            <input matInput placeholder="E-mail" ng-model="data.email" type="email">
          </mat-form-field>
          <br />
        </form>
      </mat-card-content>
    </mat-card>

然后在 css 规则中使用更具体的标识符并将 mat-form-field 的宽度属性更改为 100%。

    #sopi mat-form-field {
      width: 100%;
    }

这样，规则将仅适用于标识为 sopi 的容器，并且输入将设置为 100%。

Answer 6

这对我有用

mat-form-field{
  display: block;
}

Angular mat-form-field如何设置宽度：100％

6 个答案: