ihue ihue - 27 days ago 10
CSS Question

Double Scroll Bars kept showing in Windows Broswers

Description



I use tlk chat integration, and I kept seeing 2 scrollbars only on Windows Firefox + IE.

tlk
allow me to put a custom css to their chat.

I did some research and I've tried all of these below trying to prevent it, but none of them CSS seem to work. On top of my HTML file, I've added

//html, body {height:100% !important;}
// html { overflow-y: scroll !important ;}
// * html .clearfix { height: 1% !important; }
// html {overflow-y: hidden !important; }


Fiddle = https://jsfiddle.net/bheng/yrq93jyy/show/

If you view it on a Windows, you will see this like me

enter image description here




Question



How would one go about and debug this ?




I'm opening to any suggestions at this moment.

Any hints / suggestions / helps on this be will be much appreciated !

Answer

This has absolutely nothing to do with laravel nor PHP.

The element #tlkio has a CSS rule overflow: auto; which is differently interpreted by different browsers. To override it, you can do something like this:

#tlkio {overflow: hidden !important}

Ideally, you'd change the original rule without overriding it, but I assume you can't do it since it's a third-party integration.

Check it out: https://jsfiddle.net/yrq93jyy/1/

Comments