Chrome users may encounter difficulty grabbing the horizontal textarea scrollbar if a border-radius has been applied

Question

Chrome users may encounter difficulty grabbing the horizontal textarea scrollbar if a border-radius has been applied

Check out this JSFiddle for more information

<textarea wrap="off" rows="5" style="border-radius: 4px">aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaa
  aaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaabbbbbbbbb
  aaaaaaaaaaabbbbbbbbb
</textarea>

Scroll to the middle of the text box
Attempt to grab the horizontal scrollbar with your mouse
You'll notice that you can't, due to the blinking text cursor behind it!

If you remove the border-radius style and retry, you will find that you are able to grab the horizontal scrollbar. It also begins functioning once you scroll to the very bottom.

This functionality works smoothly in Firefox. I opted to use the wrap attribute instead of CSS as it is the most compatible method across browsers, including IE11 (source: HTML Textarea horizontal scroll). Using CSS caused an issue in IE11 where pressing the return key produced a space instead of a new line.

Does anyone know how to resolve this issue in Chrome?

Edit: Bug has been resolved in Chrome version 52

html css google-chrome

Answer 1

Answer №1

Fixing the scrollbar issue can be achieved by adding position:relative; as mentioned in my previous comment.

Alternatively, you may want to experiment with setting border to none and using box-shadow for a similar effect.

In this fiddle, you can explore three different options: https://jsfiddle.net/p6jw6qvf/

#one{
    border: none;
    box-shadow: 0 0 5px 2px #9a9a9a;
}

#two{
    position: relative;
    border-radius: 4px;
}

Keep in mind that if you choose option #two, the scrollbars will overlap the border. To address this, consider using custom scrollbars with border-radius applied to them.

Answer 2

Fixing the scrollbar issue can be achieved by adding position:relative; as mentioned in my previous comment.

Alternatively, you may want to experiment with setting border to none and using box-shadow for a similar effect.

In this fiddle, you can explore three different options: https://jsfiddle.net/p6jw6qvf/

#one{
    border: none;
    box-shadow: 0 0 5px 2px #9a9a9a;
}

#two{
    position: relative;
    border-radius: 4px;
}

Keep in mind that if you choose option #two, the scrollbars will overlap the border. To address this, consider using custom scrollbars with border-radius applied to them.

Answer 3

Answer №2

• OPTION 1:

In the past, I encountered a similar issue and devised a makeshift solution that may not be the most elegant, but it gets the job done for me.

To address the problem, start by enclosing your textarea within a div element with the following properties:

div {
    border: 1px solid rgb(169,169,169);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
}

Next, remove the border from the textarea and apply vertical-align: top to eliminate any unwanted spacing caused by elements with display: inline-block:

textarea {
    vertical-align: top;
    border: 0;
}

This approach may not be considered professional or reliable, but visually matches the appearance of the textarea in your code snippet. Exercise caution when implementing this method as it could behave unexpectedly in certain scenarios.

Example: → here.

Snippet:

div {
  border: 1px solid rgb(169, 169, 169);
  border-radius: 4px;
  overflow: none;
  display: inline-block;
}

textarea {
  vertical-align: top;
  overflow-x: visible;
  border: 0;
}

<div>
  <textarea wrap="off" rows="5">aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbb
    IT'S 2016 AND I CANT EVEN HAVE A HORIZONTAL SCROLLBAR ON A TEXTBOX.
  </textarea>
</div>

• OPTION 2:

Through testing, I discovered that applying position: relative to the textarea seems to resolve the issue, at least in my Chrome version. However, if you prefer an alternative positioning method, the above solution should suffice.

Answer 4

• OPTION 1:

In the past, I encountered a similar issue and devised a makeshift solution that may not be the most elegant, but it gets the job done for me.

To address the problem, start by enclosing your textarea within a div element with the following properties:

div {
    border: 1px solid rgb(169,169,169);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
}

Next, remove the border from the textarea and apply vertical-align: top to eliminate any unwanted spacing caused by elements with display: inline-block:

textarea {
    vertical-align: top;
    border: 0;
}

This approach may not be considered professional or reliable, but visually matches the appearance of the textarea in your code snippet. Exercise caution when implementing this method as it could behave unexpectedly in certain scenarios.

Example: → here.

Snippet:

div {
  border: 1px solid rgb(169, 169, 169);
  border-radius: 4px;
  overflow: none;
  display: inline-block;
}

textarea {
  vertical-align: top;
  overflow-x: visible;
  border: 0;
}

<div>
  <textarea wrap="off" rows="5">aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaa
    aaaaaaaaaaabbbbbbbbb
    IT'S 2016 AND I CANT EVEN HAVE A HORIZONTAL SCROLLBAR ON A TEXTBOX.
  </textarea>
</div>

• OPTION 2:

Through testing, I discovered that applying position: relative to the textarea seems to resolve the issue, at least in my Chrome version. However, if you prefer an alternative positioning method, the above solution should suffice.

Chrome users may encounter difficulty grabbing the horizontal textarea scrollbar if a border-radius has been applied

Answer №1

Answer №2

Similar questions

Is it considered good practice to utilize Vue.js for managing global shared state and implementing for loops outside of components?

Update a section of my PHP webpage using setInterval()

Matching multiple divs with different ids in PHP using preg_match_all and regex

Introducing the new default in Google Chrome: Now accessing window.opener for target="_blank" links after rel="noopener" is the standard feature

Form-linked Progress Bar

Vertical centering not functioning as expected due to issues with margin-top and margin-bottom

Having Trouble with jQuery toggleClass

jQuery divs seem to "gaze up" towards the mouse pointer

Screening through the outgoing html documents

The value property of the input element is returning as undefined

Prevent overlapping of range sliders in HTML and CSS

The issue of flickering while scrolling occurs when transitioning to a new page in Angular

Column div being obscured by footer

Is there a way for me to retrieve the price using the xpath?

CSS code preventing hyperlink from functioning

I am having difficulty with my ajax code and I am unsure of how to resolve it

Show the name of the current user in a WordPress form using a readonly input field

Add opening and closing HTML tags to enclose an already existing HTML structure

The PHP script is exhausting memory resources and triggering a fatal error

Revamping Tab Styles with CSS