ihue ihue - 1 month ago 12
CSS Question

Fix double scroll bar in Windows Machine

Description



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




Attempt



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

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

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


I've even tried
!important


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


I put together a Fiddle here = 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/