0

I use a simple textarea element and add a placeholder and for some reason the placeholder have a weird gap from the side. The code is in React.js:

PLEASE NOTICE: my HTML DOM structure's direction is RTL!

<textarea
    className='inputArea'
    {...passProps}
/>

With the following CSS (SASS) styling:

.inputArea
    display: block
    width: 100%
    padding: 1rem
    overflow-y: scroll
    height: 160px

And this is how it look like: (with gap)

enter image description here

You can see the space between the carret and the placeholder text. But When I set dir='ltr' the gap disappears:

enter image description here

Also need to know, is that when I set overflow-y: hidden the gap disappears..

What seems to be the problem ?

6
  • 1
    Inspect the DOM and look at all the computed style values to see what may be adding that padding/margin/space for any of those elements.
    – Drew Reese
    Oct 4, 2020 at 18:03
  • it's happens because of the scroll wich takes 6px of the width but I don't understand why .. ? Oct 4, 2020 at 18:09
  • If I set overflow-y to auto, how would it scroll ? Oct 4, 2020 at 18:19
  • 1
    Have you inspected all the elements in the text area to see what CSS rules are applied? Does the rtl direction also flip the justification of the input's text or is the text still left justified? I still think overflow-y: auto; will help as the scrollbar will only display if the content overflows.
    – Drew Reese
    Oct 4, 2020 at 18:35
  • You are right ! @DrewReese Oct 4, 2020 at 18:45

1 Answer 1

0

Textarea should be write like this

<textarea className='inputArea' {...passProps} />

And you need to remove the space between tag start and end

1
  • 1
    Your suggestion is completely opinionated and absolutely 100% not the only way to write syntactically correct JSX. Some style formatters can be configured to allow only one prop per line, to allow easy single-line updates in the future (i.e. git blame).
    – Drew Reese
    Oct 5, 2020 at 15:25

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.