Horizontal scrolling on mobile

[mpz]

trafficstars

I have such view:

If page width is small:

Horizontal scrolling to rigth with cursor:

Same code is hidden now!

After selection i see it:

How to fix this? The problem is most important on mobile devices.

[mpz]

Seems issue is not reproduce on pure prismjs.

[mpargar]

Hi, i have the same problem here.

You can partially fix the problem by adding the following line to your css file: .codeflask__flatten { white-space: pre-wrap; }

But if you are using lines numbers they get bugs:

Sorry if my english isn't good enough.

[mpz]

Fix works for me too without line numbers.

[pfgithub]

Adding wrap="off" to the textarea seems to fix it

[Zumbala]

This is the area where the problem lies, when replacing with below code it should work with line-numbers also

this.elTextarea.addEventListener('scroll', (e) => {
      this.elPre.style.transform = `translate3d(-${e.target.scrollLeft}px, -${e.target.scrollTop}px, 0)`
      if (this.elLineNumbers) {
        this.elLineNumbers.style.transform = `translate3d(0, -${e.target.scrollTop}px, 0)`
        // missing width change when moving the viewport left
        this.elPre.style.width = this.elPre.clientWidth + e.target.scrollLeft + "px"
      }
    })

[acarl005]

I fixed it on my fork. See acarl005/CodeFlask@c4b5603 for how I did it.