javascriptcssangularvmware-clarity

Clarity textarea height to fit wizard page height

Using Clarity and Angular 9, I have a button in the main content area which opens the wizard. Now in the wizard, I have a textarea which I want to fill the wizard content area. I'm able to get the width of textarea working by setting width: 100%.

But I am not able to get the same thing working for height.

Here is the stackblitz link which shows the problem. https://stackblitz.com/edit/clarity-form-reset-xtyait

Solution

  • The textarea get the size from it's parent.

    Some css togehter with Angular ::ng-deep wil do it:

    ::ng-deep .clr-control-container {
  height: 100%!important
}

::ng-deep .clr-textarea-wrapper {
  height: 100%!important
}

::ng-deep .clr-form-control {
  height: 100%!important
}

::ng-deep .clr-wizard-content {
  height: 100%!important
}

    Here is your Stackblitz with resized textarea.