Sample Code yields to a tiny container

[hjrb]

See screenshot. Something is wrong with the CSS

This is the _index.html of the Blazor WebAssembly project (.NET 5.0, VS 2019) I attached the index.html (renamed to index.txt). index.txt I did follow your instructions - but something seems to be broken.

[TomBruns]

Try updating your app.css file to match the contents from the sample app in the github repo https://raw.githubusercontent.com/serdarciplak/BlazorMonaco/master/SampleApp/wwwroot/css/app.css

[DerekChasse]

This is a dupe of #24.

There's a div which wraps the editor that you have styling control over.

.monaco-editor-container { height: 100% }

Put this in your root app.css file for it to take effect. If you're using css isolation I've had issues.

[FransVanEk]

I have tried the solutions in #24 as well as in this item, but it doesn't work for me. Created the same page as the sample page in my own solution. change the settings. but it keeps rendering it at 5px. Everything else is working, by changing all the 5px heights and looking at the console.

any other options I can try?

[dFarkhod]

I've the same problem. Anyone got any solution? Please help.

[dFarkhod]

I've the same problem. Anyone got any solution? Please help.

Here's how I've fixed the issue:

<MonacoEditor Id="codeEditor" @ref="_editor" CssClass="monaco-editor-container" ConstructionOptions="EditorConstructionOptions" OnDidInit="EditorOnDidInit" OnContextMenu="OnContextMenu" />

<style>
    .monaco-editor-container {
    height: 300px;
    border: 1px solid gray;
}
</style>

[serdarciplak]

Please see the note at the bottom of this README section : https://github.com/serdarciplak/BlazorMonaco#css-styling