Fix broken CSS layout with improper overflow
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm trying to fix a broken CSS issue in my app.

The exact same CSS works on our desktop app in Electron so I'm not sure why it's not working in Chrome.

I think the issue is that I'm cheating a bit and not properly using height the way it was intended.

The layout is essentially a variable width header which is usually about 250px high.

This should just expand to hold the content and not have a scrollbar.

Then under that there should be a area that takes up the remaining space.

The sidebar should have its own scrollbar and the main area should have its own similar sidebar.

We have a similar issue in Firefox as well.

I need to know WHAT you changed and why so that in the future I don't make the same mistake.

This needs to work in both Chrome, Firebox and Safari.

Here's what it looks like working.

https://i.imgur.com/YXMySpB.png

And here's it broken:

https://i.imgur.com/WpTqiaT.png

You can just create an account at

https://getpolarized.io and use the webapp. It's a free app so don't worry about paying or anything like that.

Would a body { overflow: hidden } work for your case?
kostasx 1 month ago
awarded to Wuddrum
Tags
css
html

Crowdsource coding tasks.

2 Solutions


My solution is based on javascript it assigns proper height to #dock-holder container to resolve the issue.

Required Changes:

1 - <header> to <header id="header-holder">

2- <div class="dock" to <div id="dock-holder" class="dock"

3- Add this script at the bottom:

<script>
var fullscreenheight = document.getElementById("doc-repository");
var headerholder = document.getElementById("header-holder");
var dockholder = fullscreenheight.offsetHeight - headerheight.offsetHeight;

//set dock-holder height
document.getElementById("dock-holder").style.height = dockholder -headerholder .offsetHeight + "px"; 
</script>

Do let me know if you face any issue.

I want a 100% CSS solution though.
getpolarized_io 1 month ago
Winning solution

Here's a simple CSS solution that worked for me in Chrome and Firefox browsers (I can't test Safari at the moment, but it should work there also):

#doc-repo-table > .dock {
    min-height: 0;
}
I had a fix for this internally and yours was the closest. I'm just going to give you the bounty as I think from your suggestion I would arrived at the closest answer. I was going to give it to charity but I'm sure you'll also do something useful with the money! Happy holidays!
getpolarized_io 1 month ago
Thank you and happy holidays!
Wuddrum 1 month ago
View Timeline