Google Chrome Bug - Overflow:auto | scroll doesn't work

Question

Here's my site in Chrome with he text running outside the box:

enter image description here

And here it is in .IE with no problem

enter image description here

Here's the relevant CSS

.section
{
height: 1000px;
width: 670px;
border: thick solid rgb(51,97,120);
border-radius: 15px;
text-align: center;
padding: 0px;
background-image: url(Images/diag_pattern.png);
background-color: rgb(255,255,255);
overflow:auto;
white-space:nowrap;
text-overflow:ellipses;
}

Very annoying? Is there anything I can do. An alternative way to show my results?

It should be "text-overflow: ellipsis;" and yes, a fiddle would make debugging a lot easier ;) — sebastian
– sebastian, Commented May 4, 2014 at 22:53
Please post all of your relevent HTML and CSS within a jsfiddle.net — Fizzix
– Fizzix, Commented May 4, 2014 at 23:04
Does this help? jsfiddle.net/53qs5 The relevent CSS is already posted. The actual page is www.biketurtle.co/search. Justsearch for bikes in 'Antrim' under 1000 and you'll get the same as the screenshot. — COOLBEANS
– COOLBEANS, Commented May 4, 2014 at 23:08

Fizzix · Accepted Answer · 2014-05-04 23:20:48Z

1

You need to edit both your section and textarea classes:

.section {
    height: 1000px;
    width: 670px;
    border: thick solid rgb(51, 97, 120);
    border-radius: 15px;
    text-align: center;
    padding: 0px;
    background-image: url(Images/diag_pattern.png);
    background-color: rgb(255, 255, 255);
    overflow-y: hidden;      /* ---- Make this hidden */
    white-space: nowrap;
    text-overflow: ellipsis;
}
.textarea {
    height: 1000px;
    width: 650;
    padding-right: 20px;
    padding-left: 20px;
    list-style: none;
    overflow-y: scroll;      /* ---- Then make this scrollable */
}

edited May 4, 2014 at 23:20

answered May 4, 2014 at 23:07

Fizzix

24.5k40 gold badges117 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

COOLBEANS Over a year ago

Didn't seem to have an affect oddly. Still works in .IE and not in Chrome.

Fizzix Over a year ago

@COOLBEANS - I have made an edit to my answer. Let me know if it helps.

COOLBEANS Over a year ago

I tip my hat to you sir :-) What was happening exactly?

Fizzix Over a year ago

Fantastic :) Basically, you were trying to make your section class scroll, although, it did not contain any content. The class with the content was textarea, therefore, it had to have the style of scroll. Hence, we needed to hide the overflow for the parent, and make the child scroll inside of it :)

COOLBEANS Over a year ago

I wonder how .IE was able to make it work in that case? It shouldn't have really,should it?

|

Collectives™ on Stack Overflow

Google Chrome Bug - Overflow:auto | scroll doesn't work

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related