How to set Angular Clarity Design 4.0 input width to 100%?

Question

For older versions, I have no difficulty overriding the default CSS behaviour of Clarity Design form controls to use 100% of the parent width.

With the 4.0 version, I can't even set style="width: 100%" on Chrome Inspector for clr-input-container and all child elements (clr-control-container, clr-input-wrapper, input).

Anyone have luck trying to make the input elements of Clarity Design 4.0 fit 100% width?

Answer 1

You can use clr-* class to apply styling on input. For example,

.clr-input,
.clr-input-wrapper {
  max-width: 100%;
  width: 100%;
}

.clr-control-container, 
.clr-input-wrapper.clr-input {
  padding-left: 0;
  padding-right: 0;
}

take a look at this stackblitz.