How to hide padding devoted to scrollbars that don't appear? - html

I've got a frustrating issue here involving a nav element that always displays an area to contain a scrollbar, even when the scrollbar is not needed. Here's what it looks like when all the content is displaying:
Here's what it looks like when you reduce the height of the window so scrolling is necessary to see all the content:
And here's what it SHOULD look like:
Here's the CSS for this element (as written in React and including some variables I'm leaving in -- I'm assuming those shouldn't matter):
box-sizing: border-box;
background-color: ${Color.White};
border-radius: 8px;
height: calc(100vh - ${heightCorrection});
padding: 0 16px;
text-align: left;
overflow: scroll;
width: ${width};
display: flex;
flex-flow: column nowrap;
> header,
footer {
padding-left: 16px;
}
I created that third screenshot by changing overflow: scroll to overflow: hidden, but that prevents me from being able to scroll when I need to, and I still need that to happen.
I should mention that a frustrating thing about this issue is that most users haven't been able to replicate it. I don't have any particularly unusual setup; I'm running the latest version of Chrome on MacOS. But others with very similar configurations aren't seeing that empty scrollbar area. This issue stumped one of the best front-end developers I know (who can't replicate it), so I thought I'd try here and see if anyone has any ideas.

Well, I didn't get any traction on this, but in case anyone lands on it, the answer is simply to change overflow: scroll to overflow: auto.

Related

Prevent scrolling due to overflow in non-scrollable elements

It's hard to explain the issue, as this seems more like a cross-browser bug than it does a feature. Follow the steps here to see the issue:
Steps to reproduce:
Run code snippet.
Click in textbox.
Repeatedly press right-arrow key until text cursor passes edge of box.
At this point the box will start 'scrolling' (in spite of the overflow: hidden). The grey background element that should fill the box 'slides' left, and to the right of it the white background behind can then be seen.
Desired behavior:
When going out of box, the text cursor simply escapes view, and the box scroll position does not slide to compensate.
How can I disable this 'no scrollbar' scrolling effect? (Note, it is in fact scrolling, because the js scrollLeft value of the overflow-box actually changes, even without a scrollbar.)
A CSS solution would really be ideal (e.g., a working overflow: hidden), but a Javascript solution could still suffice.
.overflow-box {
margin: 20px;
position: relative;
width: 64px;
height: 64px;
overflow: hidden;
border: 1px solid black;
}
.background {
position: absolute;
width: 100%;
height: 100%;
background-color: #a0a0a0;
}
.textbox {
position: relative;
margin: 20px;
width: 200px;
}
<div class="overflow-box">
<div class="background"></div>
<input type="text" value="aa bb cc dd ee ff gg hh ii jj kk ll mm nn oo" class="textbox"/>
</div>
I apologize if this question is a duplicate. I cannot find a similar question since I don't know what the effect is called..
TIA!
Ok, so I discovered two things:
The issue only occurs on elements with overflow: hidden
When 'scrolling', the box emits the scroll event when changing, allowing one to do the following to prevent the scrolling:
document.querySelector('.overflow-box').addEventListener('scroll', evt => {
evt.target.scrollTop = 0;
evt.target.scrollLeft = 0;
});
Since I have a specific container that needs to prevent scroll, I'm using CSS to set overflow: hidden on it to trigger the issue on the container and not a parent element, and then I'm applying the JS above to prevent the scrolling.
This seems to be the best solution in my case.
If anyone knows of a simpler CSS solution, I will accept that answer over this one.
I am not sure if this what did you asking about:
if you need to solve problem of hidden content you only need to resize width at first and last selector
if you need to make text with scroll you can change type into text area and then defining rows and cols attribute, this should manage that.
If all of this does not help please add some picture of the expected result you need to make it clear.

How to fix a tear between divs?

I'm working on a small practice text adventure game project. Lately I have noticed a strange tear that appears between the main story div, and the footer [menu div]. It appears randomly when you scroll the story text all the way down - sometimes it's there, sometimes it's not. The problem occurs both on mobile, and on PC.
The tear is visible here, right below "Newest line" text:
Div tear
Here an image without the tear, with the text not fully scrolled down:
No Div tear
CSS for the two divs:
main
{
font-family: '8bit', Times, serif;
font-size: x-large;
background-color: rgb(255, 255, 255);
height: 32vh;
padding: 2em;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
footer
{
font-family: '8bit', Times, serif;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: rgb(255, 255, 255);
height: 30vh;
padding: 1em;
}
I have tried several weird hacks, like CSS transform for both of those - it seemed to help with the tearing, but generated other weird artifacts with the box-shadow and such.
The full code is available here:
https://github.com/Akawgan/textRPG
Any ideas what might be causing that, or how to fix it?
I think you have run into the good old "fractional pixel values on a screen with discrete pixels" problem.
The main div has a height of 32vh, which equates to 509.11px on my screen, and probably to similar values on different screens.
There's a lot going on between CSS pixel values and the actual size on screen, so without complicating it I'm going to put it this way: some screen sizes can't handle this exact value. Your div is going to be rounded up or down to some integer value, often times "correctly", sometimes "incorrectly".
There's not much you can do to actually fix this issue, short of choosing another height value.
You might be able to work around it by placing the footer 1px on top of the main element:
footer {
position: relative;
margin-top: -1px;
}
This is a somewhat dirty trick that just superposes both elements in order to cover any gap caused by fractional pixels.
I found a way to 'reliably' experience the problem, by gradually changing the width of the viewport. The phenomenon changed, sometimes the background of the container showed through (I changed it to red so it was obvious), sometimes it seemed to be the greeny background that showed through, sometimes it seemed to be neither but instead a couple of gray lines (of different shades).
It is difficult to prove a negative, but if I removed the reverse of the flex column then I never managed to see the phenomenon.
This has to be speculation but it looks likely that putting your text into the order you want it rather than getting CSS to reverse it may remove the problem.

blank space on right side of website, culprit is not visible

My website has blank space to the right of it almost as if a margin was added to the site. The site content stretches 100% across the site and looks good, but if you scroll to the right you will see the space whether you are on a desktop or mobile.
This is such an age old question which I have also encountered in the past, but in this specific scenario, I can not seem to figure out what is causing the extra space and or why it behaves the way it does.
Thanks for any suggestions!
This block of code is causing the issue:
.hentry:after {
background: rgba(0,0,0,0);
display: block;
position: relative;
left: -5.1%;
width: 110.2%;
height: 1px;
}
Set the width to 100% or less. Good luck!
Just simple add this in css file.
body { overflow-x: hidden; }

Empty space on left and right even after fixing html width

Can anybody tell me why am i getting empty space on left and right of html body in this link click here. I am using mozilla firefox. I have even tried reducing width of html tag to 980px. I am getting horizontal scroll bar because of that extra space on left and right. Please help.
The first div under your header div (under <div id="header">) has this inline style
width: 100px;
margin: auto;
height: auto;
border: 0px solid rgb(51, 51, 51);
padding-right: 1160px;
padding-left: 95px;
Look at padding-right. Is that meant to be like that? Removing that gets rid of your horizontal scroll bar. It does nudge your header around a bit, but that may be your culprit. Or you could just do what Spring said, but that's not really clearing the issue as your jus hiding the overflowing elements and not stopping it from overflowing in the first place.
Its quite hard to do much more using Firebug on your site because there is so much going on (you have over 40 scripts loaded!) that the DOM keeps changing. You might wanna clean up some of those scripts and get rid of stuff you don't need, you're adding a lot of unnecessary bloat which will slow down your site, but that's a whole other subject.
you can add to body element this style
body
{
overflow-x: hidden;
}
I tried this style using fierbug and it worked for your page

Strange css overflow like effect taking place

I've been using a twitter bootstrap based template.
For the images at the bottom of the landing page, for some reason there is an extra scrollbar that appears which then causes the images in the portfolio at the bottom to appear cropped, or partially loaded.
Not sure which bit of html or css is causing this, as the problem doesnt seem to occur in the original template. I've checked and compared my code to the original but cant figure out what's causing it.
I have removed alot of the code from the original as i dont need much of it. I just wanted a simple homepage, but cant figure what's causing the additional scrollbar or overflow effect.
Here is the page link if anyone has any ideas: http://krmmalik.com/photography/
The reference to the Ascensor.js is what's breaking the site and adding all that ugly inline CSS to the body. I have no idea what it's supposed to be doing honestly but it's breaking things at the moment. I disabled js on your site and reloaded it and everything works fine.
That layout isn't responsive as much as it is just a fluid layout. It doesn't resize well honestly. I hope it wasn't terribly expensive. Either that or something you changed broke how it is supposed to resize.
I'd try and find out what that script is supposed to be doing, but in the meantime just remove the reference and your site seems to load correctly.
I'm seeing this in Chrome dev tools:
<div class="house" id="house0" style="height: 268px; width: 1726px; overflow-y: scroll; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">
which sets a fix height, and then causes the second scroll bar when items drop below that height with the overflow-y:scroll; property.
However, this isn't in the View Source of your document! Getting rid of that is the key to fixing the problem, if you happen to know where it's coming from.
If you have control over it, maybe try changing it to:
<div class="house" id="house0" style="min-height: 268px; width: 1726px; overflow-x: hidden; margin-top: 0px; margin-left: 0px; position: absolute; ">
What this (should) do is make it never be shorter than 268px while allowing it expand to a new height, if it needs to. I say should because I didn't test it!
here is you made silly mistake. just remove overflow-x: hidden;
and overflow-y: scroll; and your code something like this.
<div id="house0" class="house" style="width: 1263px; margin-top: 0px;
margin-left: 0px; position: absolute;">
Hope it will helps you, Cheers. !!
Mark it as answer if it will helps so that other can fix their same problems. Thanks.