Как сделать ширину 100% поля ввода в форме при использовании углового компонента clrForm для наглядности - PullRequest
0 голосов
/ 28 августа 2018

enter image description here Пример

<form clrForm>
    <clr-input-container>
        <label>Field 1 label</label>
        <input clrInput type="text" [(ngModel)]="model" name="example" style="width:100%" />
    </clr-input-container>
    <clr-input-container>
        <label>Field 2 label</label>
        <input clrInput type="text" [(ngModel)]="model" name="example" style="width:100%" />
    </clr-input-container>
</form>

выше - пример кода из формы ясности, где я использую угловой компонент для формы, дело в том, что когда я использую форму без углового компонента ширина ввода занимает 100%, когда я задаю style = " 100% ", но то же самое, если я использую с угловым компонентом , поле ввода не принимает значение 100%, хотя я даю style =" 100% ". Пожалуйста, дайте мне знать причину, как я могу сделать ширину до 100% при использовании углового компонента для формы ясности.

Ответы [ 4 ]

0 голосов
/ 03 августа 2019

Это работа для меня; -)

<div class="form-outer">

  <form clrForm
    clrLayout="horizontal"
    [formGroup]="exampleForm"
    class="clr-form-compact"
    *ngIf="exampleForm">

      <clr-input-container>
          <label>Field 1 label</label>
          <input clrInput type="text" formControlName="sample" />
          <clr-control-helper>Helper text that shows while it is pristine and valid</clr-control-helper>
          <clr-control-error>Error message that appears after focus is lost and control is invalid</clr-control-error>
      </clr-input-container>

  </form>

</div>

Ad my .scss

.form-outer {
    input.clr-input {
        width: 100% ;
    }
}
0 голосов
/ 05 сентября 2018

Что-то подобное должно охватывать большинство типов входов? Для выбора может потребоваться точная настройка

.clr-form.is-fullwidth {
    width: 100%;

    .clr-control-container, .clr-input {
        width: 100%;
    }
}
0 голосов
/ 04 декабря 2018

Мы исправили это с помощью атрибута размера для полей ввода, например:

<input clrInput type="text" [(ngModel)]="..." name="title" required size="40" />

Но этого нельзя сделать для других элементов управления.

0 голосов
/ 03 сентября 2018

100% на полную ширину - это уродливо, я вам это предоставлю. Однако давайте возьмем компонент / форму входа в систему и преобразуем его в угловую форму

<div class="login-wrapper">
    <form class="login" clrForm>

        <section class="title">
            <h3 class="welcome">Welcome to</h3>
            MyApp
        </section>

        <div class="login-group">

            <clr-input-container>
                <input clrInput class="username" type="text" id="username" name="username" placeholder="Username" [(ngModel)]="username">
            </clr-input-container>
            <clr-password-container>
                <input clrPassword id="password" name="password" [(ngModel)]="password" />
            </clr-password-container>

            <div class="checkbox">
                <input type="checkbox" id="rememberme">
                <label for="rememberme">
                    Remember me
                </label>
            </div>

            <button type="submit" class="btn btn-primary">SIGN IN</button>

        </div>
    </form>
</div>

это дает эту уродливую форму

enter image description here

Так как бы вы это стилизовали? Я попытался добавить

.clr-control-container {
    width: 100% !important;
}

к компоненту входа scss, но он не работает

...