Editor is rendering squashed about blazormonaco

[serdarciplak]

Hi @jstafford5380 and @julivanespi

As you know, filling the remaining space in the parent element in html is not as straight-forward as just setting the height to 100%. It depends on the properties of the parent and the sibling elements. So, leaving this task to you (the library consumer) was the best option. You can set the height due to your case.

As there's already a predefined css class for the editor container element, you don't need to add an extra CssClass. Just set the properties you need via this class.

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

[jstafford5380]

Minimal recreation: https://github.com/jstafford5380/issue-smashed-monaco

[julivanespi]

@jstafford5380

I also ran into this. What worked for me is the following

<MonacoEditor Id="any-id-string" ConstructionOptions="EditorConstructionOptions" CssClass="editor-class"/>



<style>
    .editor-class{
        height: 500px;
    }
</style>

I think it would be better if the element filled it's parent element completely. However, in it's current state, the "CssClass" field should be required so it can give the developer an indication to add additional styling.

Hopefully this helps...