Control size of Angular clr form inputs

[afulkersonApollo]

Would be nice if an API was exposed that allowed us to control the size of form inputs. Something like a fullWidth or columnSpan attribute on the <clr-*-container> elements. Currently the way I change the size of an inner form element is by using :host ::ng-deep because there's no way, that I can tell, to easily adjust its width. Is there a better or more obvious way to do it?

[mathisscott]

@afulkersonApollo
This is a lot easier to do (and already supported) in the Clarity Core forms.

If you are using Angular, I recommend checking out our @cds/angular package: https://clarity.design/get-started/developing/#angular

[afulkersonApollo]

Thanks for the recommendation. Using the cds package has been a little unwieldy for me but I'll give it another shot.

[hippee-lee]

+1 for what @mathisscott pointed out but, if you are not able to move to the core forms yet, there is support for controlling width by using Layout with grid

See that section here. Here is what it says:

You can use the clrLabelSize directive to configure the label width for an entire form. This is useful for horizontal and compact layouts, but doesn't apply when you are using vertical layout. It will accept a number between 1-12 to calculate the width according to our grid, and the controls will adopt the remaining size. For example if you pass clrLabelSize="4" it will size the controls to use 8 grid columns for a total of 12 columns.

<form clrForm clrLayout="horizontal" clrLabelSize="4">
  <clr-input-container>
    <label>First name</label>
    <input clrInput type="text" [(ngModel)]="firstName" name="firstName" required />
    <clr-control-error>We need your first name for legal compliance</clr-control-error>
  </clr-input-container>
</form>