search

serdarciplak / BlazorMonaco

Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code.
https://serdarciplak.github.io/BlazorMonaco/
MIT License
446 stars 98 forks source link

Editor is rendering squashed #24

Closed jstafford5380 closed 3 years ago

jstafford5380 commented 3 years ago

image

Is there any reason it would render like this out of the box? I don't have any css applied, but it seems to be rendering at 5px in height

jstafford5380 commented 3 years ago

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

julivanespi commented 3 years ago

@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...

serdarciplak commented 3 years ago

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