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.