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

[hellomikko]

I will as of this date and time of this reply here post what IS and WILL work in case anyone does have any issues with it showing up squishy instead of the height being appropriatly shown as the code intended to be:

Editor.tsx:

"use client";

import MonacoEditor from '@monaco-editor/react';

interface EditorPanelProps {
  language: string;
  code: string;
  setCode: (value: string) => void;
}

export default function EditorPanel({ language, code, setCode }: EditorPanelProps) {
  return (
    <div className="monaco-editor-container">
      <MonacoEditor
        height="100%"
        language={language}
        theme="vs-dark"
        value={code}
        onChange={(value) => setCode(value || '')}
        options={{
          minimap: { enabled: true },
          scrollbar: { vertical: 'hidden', horizontal: 'auto' },
          fontSize: 14,
        }}
      />
    </div>
  );
}

Of course, Im using @Tailwind because... wtf not. However you can use a regular style sheet, however you need to make sure something like this is added to your stylesheet:

globals.css: @tailwind base; @tailwind components; @tailwind utilities;

/ Custom Global Styles / html, body { @apply bg-white text-gray-900 dark:bg-gray-900 dark:text-white; height: 100%; margin: 0; overflow: hidden; font-family: 'Inter', sans-serif; }

root, #__next {

height: 100%; }

.monaco-editor-container {
  height: 500px;
  border: 1px solid gray;
}

And yes. I know that I did not code the first few lines of the globals.css, thats because the only important thing there I wanted to show that works is what IS in the ``` code.

I hope this works for you guys as well as it did for me, thanks too:

• https://github.com/serdarciplak/BlazorMonaco#css-styling for his examples as well. My example is setup for NextJS however...