Text overflow not working

[rbro3551]

Whenever I add “overflow:”auto”” to the style in this with a fixed height, the text seems to overlap itself and get messed up as if it’s coming back down from the top as seen in the picture. Is there a way to properly have an overflow scroll here?

[jaywcjlove]

@rbro3551 Style conflict.

[rbro3551]

@rbro3551 Style conflict.

Thank you for the reply! I did try starting a bare project and just having a codeEditor by itself without any other styles and it gave me the same issue. There's a picture of the styling I had below. This would definitely be something on my end though?

[jaywcjlove]

You can use codesandbox.io to provide me with an example to reproduce the error. I can help you look

[rbro3551]

You can use codesandbox.io to provide me with an example to reproduce the error. I can help you look

Here is the link with the issue: https://codesandbox.io/s/goofy-butterfly-wp8bm2?

Thanks!

[jaywcjlove]

@rbro3551 Do you need a horizontal scroll bar?

[rbro3551]

@rbro3551 Do you need a horizontal scroll bar?

No my issue is with vertical scrolling. When the text overflows vertically that's when it messes up

[jaywcjlove]

@rbro3551 https://codesandbox.io/embed/uiwjs-react-textarea-code-editor-issues-133-zq9vpw?fontsize=14&hidenavigation=1&theme=dark

[jaywcjlove]

<div style={{ height: 130, overflow: "auto" }}>
  <CodeEditor
    value={code}
    ref={textRef}
    language="js"
    placeholder="Please enter JS code."
    onChange={(evn) => setCode(evn.target.value)}
    padding={15}
    style={{
      fontFamily:
        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
      fontSize: 12
    }}
  />
</div>

@rbro3551

[rbro3551]

<div style={{ height: 130, overflow: "auto" }}>

  <CodeEditor

    value={code}

    ref={textRef}

    language="js"

    placeholder="Please enter JS code."

    onChange={(evn) => setCode(evn.target.value)}

    padding={15}

    style={{

      fontFamily:

        "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",

      fontSize: 12

    }}

  />

</div>

@rbro3551

Oh wow that works great thank you so much!