CODEWITHSUNDEEP
cssangularcodemirror
user824624
user824624

Reputation: 8078

change height and width of codemirror in angular

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.

enter image description here

Upvotes: 7

Views: 3721

Answers (3)

Steve
Steve

Reputation: 1124

If you disable Angular view encapsulation in the component decorator, then you can override the .CodeMirror styles. Providing the CodeMirror options as a component property allows you to set viewportMargin: Infinity, which it seems you can't do by providing it directly as an attribute in the HTML. The combination of that with height: auto causes the editor to automatically resize vertically to fit its contents.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class MyComponent implements OnInit {
  @ViewChild('CodeMirror') private cm: any;
  codemirrorOptions = {
    lineNumbers: false,
    lineWrapping: true,
    viewportMargin: Infinity,
  };
  ...

my.component.html:

<ngx-codemirror
  #CodeMirror
  [(ngModel)]="myModel"
  (ngModelChange)="onChanged($event)"
  [options]="codemirrorOptions"
  ngDefaultControl
></ngx-codemirror>

my.component.scss:

.CodeMirror {
  height: auto;
}

Upvotes: 2

iugs88
iugs88

Reputation: 1471

You can try to add in your componentwithcodemirror.css to resize only texteditor

:host() ::ng-deep .CodeMirror{
height:250px
}

Upvotes: 7

Douglas P.
Douglas P.

Reputation: 560

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;
}

Upvotes: 6

Related Questions