change height and width of codemirror in angular

Question

i am using angular 7 with latest ngx-codemirror.

<ngx-codemirror [(ngModel)]="sql_input"  [options]="{lineNumbers: true,theme: 'material',mode: 'markdown'}"></ngx-codemirror>

The final looks is shown as below, which is too big size for me. Just wonder how to resize it to be more smaller in height and width.

Answer 1

You can just add your component inside a wrapper/container element.

<div class="container">
  <ngx-codemirror
    [(ngModel)]="sql_input"
    [options]="{ lineNumbers: true, theme: 'material', mode: 'markdown' }"
  ></ngx-codemirror>
</div>

And then set the desired width and height to the container.

.container {
  width: 500px;
  height: 500px;
}