mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-07-03 21:58:47 +00:00
Code Issues Releases Wiki Activity

Fix monaco editor overflowing from container (partial)

Browse Source
This commit is contained in:
Kristóf Tóth 2018-06-12 19:09:11 +02:00
parent 0fbaf2275e
commit 0fc90126a7
3 changed files with 8 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/dashboard/dashboard.component.ts
View File

@ -93,8 +93,8 @@ export class DashboardComponent implements OnInit, OnDestroy {
setLayout(layout: string) {
this.layout = layout;
// We need to trigger a 'resize' event manually, otherwise ace editor stays collapsed
// Ace editors 'resize' event listener requires a parameter of force=true
// We need to trigger a 'resize' event manually, otherwise editor stays collapsed
// editor 'resize' event listener requires a parameter of force=true
setTimeout(() => window.dispatchEvent(new Event('resize', {force: true} as any)), 0);
}

15
src/app/ide/ide.component.html
View File

@ -37,17 +37,10 @@
</div>
</div>
<!--div (keyup)="setCodeState(CodeState.DIRTY); setDeployButtonState(DeployButtonState.TODEPLOY); resetAutoSaveCountdown()"
ace-editor
[(text)]="code"
[mode]="language"
[theme]="theme"
[options]="options"
class="tfw-ace-editor">
</div-->
<ngx-monaco-editor [(ngModel)]="code"
class="tfw-ace-editor"
(keyup)="setCodeState(CodeState.DIRTY); setDeployButtonState(DeployButtonState.TODEPLOY); resetAutoSaveCountdown()"
class="tfw-ide-editor"
(keyup)="setCodeState(CodeState.DIRTY);
setDeployButtonState(DeployButtonState.TODEPLOY);
resetAutoSaveCountdown()"
[options]="editorOptions"
></ngx-monaco-editor>

3
src/app/ide/ide.component.scss
View File

@ -9,9 +9,10 @@
grid-template-columns: 8fr 1fr;
}
.tfw-ace-editor {
.tfw-ide-editor {
height: calc(100% - 67px);
width: 100%;
overflow: hidden;
}
.btn-group {