In this post we will take a look how you can style your Draft.js editor component. We will make the editor multiline, scrollable and add background...
For further actions, you may consider blocking this person and/or reporting abuse
Thank you for explaining the Overflow-Y. I just wanna ask a thing. Now I have aaded Overflow-Y but it shows me scrollbar before adding any text which I dont' want. How can I make it auto display when complete textarea will fill?
Tuoma,
One thing I did notice, might be a draftjs issue. If you go to the very bottom then click on 'Enter' it works fine then if you up arrow up the the previous line then hit 'Enter' notice the cursor doesn't go to the next line . Hope that makes sense.
Luan
Hi! If you want to show the scrollbar only when needed, you should use the value "auto" for the overflow-y property. So
overflow-y: autoshould set it visible only when needed.I did the same what you have said but then also I can see scrollbar. What would be the issue?
That's weird, it should work straight out of the box just with the
overflow-y: auto. I am afraid it is hard to tell the issue without any code example.Thanks for the article. I tried to add the 'overflow-y: auto' with height: 50px from draftjs.org however when hitting 'Enter' the scroll doesn't follow but on your example it does. What am I doing wrong here. Refer to the bottom right with the 'overflow-y: auto' and height: 50px modification.
Hi Ivdang! Could you share e.g. a codesandbox link with your code and I can take a look :)
Tuoma,
Sorry for the late response. I am going to attempt this with draft-js-plugins-editor. My project is wrapped in this library. If you have tried already please let me know.
Thanks,
Luan Dang
Tuoma,
I figured out my issue. I had position: relative in my draftjs blocks and imported Draft.css, this caused me issue. I decided to use display: flex and changed position: static since Draft.css sets DraftEditor-root to position : relative. Thanks again.
Luan
Great to hear that you got it working!