CODEWITHSUNDEEP
cssangularvmware-clarity
Ibrahim Netto
Ibrahim Netto

Reputation: 27

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

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?

Upvotes: 0

Views: 1431

Answers (1)

Dipen Shah
Dipen Shah

Reputation: 26075

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.

Upvotes: 1

Related Questions