18

Is there a way to completely hide overview ruler in monaco-editor? It is still visible with the following:

        overviewRulerLanes: 0,
        hideCursorInOverviewRuler: true,
        scrollbar: {
            vertical: 'hidden'
        },
        overviewRulerBorder: false,

3 Answers 3

10

Did you mean this?

if so:

minimap: {enabled: false}

2
  • 1
    No, I mean the scrollbar, not the minimap
    – eprst
    Dec 1, 2019 at 20:13
  • to hide the minimap needs to been in the options object. options={{ minimap: { enabled: false } }}
    – peter
    Aug 26, 2022 at 15:55
7

If you want to hide the scroll bar, you can do this

const monacoInstance=monaco.editor.create(document.getElementById("editor"),{
    value:`console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");console.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");\nconsole.log("hello,world");`,
    language:"javascript",
    // theme:"vs-dark",
    readOnly:true,
    minimap:{enabled:false},
    overviewRulerLanes: 0,
    scrollbar: {
        vertical:"hidden",
        horizontal: "hidden",
        handleMouseWheel:false,
    },
    wordWrap: 'on',
})
2
  • I am using it like this <Editor height="80vh" defaultLanguage="javascript" defaultValue= {code} className=" overflow-hidden" /> How to solve this issue in react js. May 10, 2022 at 13:47
  • @AnkitKumar pass the same options to the options prop like so: <Editor ... options={{ scrollbar:{...} }} Dec 17, 2022 at 14:11
4

With the settings you are posting, it should work

        overviewRulerLanes: 0,
        hideCursorInOverviewRuler: true,
        scrollbar: {
            vertical: 'hidden'
        },
        overviewRulerBorder: false,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.