CODEWITHSUNDEEP
vmware-clarity
vinay k hegde
vinay k hegde

Reputation: 253

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

enter image description hereExample

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

Upvotes: 10

Views: 9029

Answers (7)

BastiBen
BastiBen

Reputation: 19860

Angular 17

Just add this to the appropriate CSS file:

.clr-input {
  width: 100%;
}

Upvotes: 0

Wendell
Wendell

Reputation: 180

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

Horizontal Layout:

enter image description here

Vertical Layout:

enter image description here

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

Upvotes: 2

PhatBuck
PhatBuck

Reputation: 356

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>

Upvotes: 2

jspassov
jspassov

Reputation: 811

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

Upvotes: 0

Nightmare
Nightmare

Reputation: 41

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.

Upvotes: 4

Justin Conner
Justin Conner

Reputation: 1

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

Upvotes: 0

jmls
jmls

Reputation: 2969

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

enter image description here

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

Upvotes: -2

Related Questions