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.

The `max-widths` on form inputs was a design decision, leaving input widths to be 100% will make for very wide inputs in desktop forms. The inputs are designed to default to the defined size of the browser while still keeping room for the error icon. — hippeelee, Aug 28 '18 at 23:40
Also, fyi - the reason it does not work with the *angular component* is because the styles are encapsulated into the components view and do not affect the rest of the application. There is a deprecated technique you can use to override a componants style. Read more here: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep — hippeelee, Aug 28 '18 at 23:49
Sorry, I don’t understand that last comment. What’s your question again? — hippeelee, Aug 29 '18 at 13:23
I mean the entire form layout doesn't look good if its not 100% width, the whole page looks empty. example the image above currently this is how it looks.. — vinay k hegde, Aug 30 '18 at 04:56
`Looks good to you or me` is subjective. IMO 100% width seems like it would take up to much space. As I said earlier the max-width was a design decision based on the UX research that went into the new forms design. I understand that you don’t like the decision that was made - there is nothing stopping you from overriding the css as you see fit for your app. — hippeelee, Aug 30 '18 at 05:04

score 4 · Answer 1 · answered Dec 04 '18 at 09:09

4

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.

answered Dec 04 '18 at 09:09

Nightmare

41
4

score 2 · Answer 2 · answered Aug 10 '19 at 22:33

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>

answered Aug 10 '19 at 22:33

PhatBuck

326
5
15

This doesn't seem to work with other components like select. – kovac Jul 16 '20 at 14:44

Wendell · Answer 3 · 2020-06-06T16:04:12.547

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>

@EmilioNumazaki It works for me, you just need to put Clarity grid classes to labels and inputs. See my edited answer. — Wendell, Jun 06 '20 at 16:06

score 0 · Answer 4 · answered Sep 05 '18 at 09:46

0

Something like this should cover most inputs types? Select might need some fine tuning

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

    .clr-control-container, .clr-input {
        width: 100%;
    }
}

answered Sep 05 '18 at 09:46

Justin Conner

1
1

score 0 · Answer 5 · answered Aug 03 '19 at 17:50

This work for me ;-)

<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% ;
    }
}

score -1 · Answer 6 · answered Sep 03 '18 at 08:48

100% on a full width form is ugly, I'll grant you that. However, let's take the login component / form and convert it to using the angular form

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

this gives this ugly form

So how would you style this ? I have tried adding

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

to the login component scss, but it doesn't work

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

6 Answers6