How to make width 100% of the input field in the form when using Angular component clrForm in clarity

Question

Example

<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>

above is the code sample from clarity form, where I am using angular component for the form, the thing is when I Use form without angular component the input width takes 100% when I give style="100%" but same thing if i use with angular component the input field is not taking to 100% though I give style="100%". Please let me know the reason how can I make width to 100% when using angular component for the clarity form.

Answer 1

We patched around it with a size attribute for input fields like this:

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

But this can't be done for other controls.

Answer 2

Something like this gave me 100% width for the <input> in a form.

SCSS:

.clr-form-control {
   align-items: unset;
}
.clr-input{
   width: 100%;
}

HTML:

<form class="clr-form">
  <clr-input-container>
    <input clrInput [(ngModel)]="field"/>
  </clr-input-container>
</form>

Answer 3

This is what I did with my forms to make the input controls fill up the 100% width:

Horizontal Layout:

Vertical Layout:

<form clrForm class="form-flex">...</form>

.form-flex {
  width: 100%;

  .clr-control-container {
    display: block;
    width: 100%;

    // Override to make select full width
    .clr-select-wrapper,
    .clr-select {
      width: 100%;
    }

    // Override to make search full width
    .hf-search-wrapper > .hf-search,
    .hf-search-select-input,
    .hf-search-input-text-container {
      width: 100%;
    }

    // Override to make input full width
    .clr-input-wrapper > .clr-input {
      width: 100%;
    }

    // Override to make password full width
    .clr-input-wrapper {
      width: 100%;

      & > .clr-input-group {
        max-width: 100%;
        width: 100%;
        padding-right: 0.4rem;

        & > input {
          width: calc(100% - 1rem);
        }
      }
    }
  }
}

In forms,

<clr-input-container>
                        <label class="clr-col-xs-12 clr-col-md-4 clr-col-lg-4"
                            >Employee Code/ID</label
                        >
                        <input
                            hfFocusInput="true"
                            class="clr-col-xs-12 clr-col-md-8 clr-col-lg-8"
                            clrInput
                            type="text"
                            formControlName="code"
                            name="code"
                        />
                        <clr-control-helper>Enter a unique Code.</clr-control-helper>
                        <clr-control-error *clrIfError="'required'"
                            >You must provide a Code!</clr-control-error
                        >
                    </clr-input-container>