Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to hide the vertical scroll bar when maxRows is defined

See original GitHub issue

Long 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:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

FrancescoCioriacommented, Oct 11, 2017

So basically, as you already said, overflow-x: hidden and overflow-y: scroll are enforced by autosize which also removes any overflow style.

The problem here is that overflow-y: scroll is needed by autosize 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 set maxRows={1} and then, in the CSS, set .overflow-hidden-important { overflow: hidden !important }.

cectoncommented, Oct 11, 2017

Thanks! I think this will do the trick. Too bad there isn’t a cleaner way…

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found