How to hide the vertical scroll bar when maxRows is defined
See original GitHub issueLong Story Short
I’m trying to hide the vertical scroll bar when the number of lines exceeds maxRows
. For example I have foo\nbar
in the textarea and maxRows
is set to 1. To do so I pass overflow: "hidden"
to the style
attribute of the component. Apparently this attribute in particular is ignored. I tried also overflowY: "hidden"
without success.
Expected Behavior
The style attribute overrides also the overflow*
attributes.
Actual Behavior
The component ignores the specified overflow*
style attributes.
Use Case
I’m building a component that is a one-line field. When it gets focus, I want this component to expand to its full size. When I leave, I want this component to get back to one-line only [edit] without a scroll bar.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:6 (3 by maintainers)
Top Results From Across the Web
How To Hide Scrollbars With CSS
Learn how to hide scrollbars with CSS. How To Hide Scrollbars. Add overflow: hidden; to hide both the horizontal and vertical scrollbar. Example....
Read more >How to Hide the Scrollbar in CSS
To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML; CSS. Result; Skip Results Iframe.
Read more >CSS hide scroll bar if not needed
What I mean is that I am building a website and I have a main area which posts will be displayed and I...
Read more >Uncessary vertical scrollbar in a textarea inside ...
The vertical scrollbar is visible, when count of rows is between minRows and maxRows . What are the steps to reproduce? Min rows...
Read more >scrollbar-gutter - CSS: Cascading Style Sheets - MDN Web Docs
When using classic scrollbars, the gutter will be present if overflow is auto , scroll , or hidden even if the box is...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
So basically, as you already said,
overflow-x: hidden
andoverflow-y: scroll
are enforced byautosize
which also removes anyoverflow
style.The problem here is that
overflow-y: scroll
is needed byautosize
to work correctly so it would be too risky to mess with it…The easiest solution for you would be to programmatically add a class
overflow-hidden-important
when you setmaxRows={1}
and then, in the CSS, set.overflow-hidden-important { overflow: hidden !important }
.Thanks! I think this will do the trick. Too bad there isn’t a cleaner way…