On my laptop I can remove the space right for the element by making it bigger and then set overflow: hidden but on my iPhone it will just make a horizontal scroll bar. How can I fix this? I have tried to use media queries but it doesn't work either.
Try this code-
elementSelector{
width: 100%;
overflow: hidden !important;
}
This can be fixed by using the overflow: hidden attribute on <HTML> like this <HTML style="overflow: hidden">
Related
Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css?
I mean no hacks or anything.
I tried two javascript solutions:
1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.
2) Calculate the offsetWidth and apply it on the wrapper div on every resize.
What didnt work:
1) Position absolute.
2) Floating everything to the left was a bad idea.
3) Leaving the scrollbar visible (Looks bad).
4) Overflow-y hidden makes things user unfriendly.
There are a lot of ways to go around this issue though normally you won't mind a little push to the left:
Give overflow-y: scroll to body and make sure always there is a scrollbar.
Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:
a. Giving width: 100vw to body element, or
b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.
There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.
Just give your body a width of 100vw like this:
body{
width: 100vw;
}
Even though all the answers above are correct, I stumbled upon this issue and I had to come up with another solution.
Since my content width takes up the whole page and it has some properties to justify in the center, it was being pushed to the left and these options didn't prevent it from happening.
What fixed the problem for me was to add a padding of the size of the scroll when the scroll is added on hover.
I tested on Chrome and Edge. It's not a perfect fix but it is enough for what I need right now.
.scrollable {
width: 100%;
height: 91vh;
overflow: hidden;
padding: 0px !important;
}
.scrollable:hover {
width: 100%;
height: 91vh;
overflow-y: auto;
padding-left: 16.8px !important;
}
Unfortunately there is no other way to prevent your problem.
Just use
body {
overflow:hidden;
}
As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.
I hope that helps.
To disable the horizontal scrollbar, you can use overflow-x, so it won't affect your vertical scroll:
body {
overflow-x: hidden;
}
Just set overflow-x to hidden on the element that has the scrollbar (usually this would be the body or the immediate children of it).
I had the same problem on my nextjs app which already had overflow-x set to hidden on the body. The below solution worked for me
#__next{
overflow-x: hidden;
}
I have a standard HTML table. I didn't set the width of the table so it's okay if it fits on the page. However when the table contents are too wide then they extend outside of the enclosing DIV. Is there a way I can make it so that a scroll bar appears only if it's too wide?
Note I tried to add "overflow: hidden" to the DIV but then it just cuts off the table and I cannot see any more.
Use overflow:auto.
Read & Test it here
use overflow-x: auto; for horizontal scroll and overflow-y: auto; for vertical scroll and use overflow: auto; if both direction.
.containingDiv {
overflow: hidden;
overflow-x: auto;
}
Adding scroll bars only when necessary is the purpose of overflow:auto; in CSS and Overflow: scroll; will add them all the time, which probably isn't what you want.
maybe overflow: scroll or overflow: auto ?
This set a scrollbar if the content is to big.
Use overflow: auto on the div.
Note that it will only work is your div has a fixed width!
You want like This, This is also animate which is more helfull
I have a website based Wordpress and for some strange reason when I open it through my iPhone or any other mobile device I only see the background of the site and only if I scroll a lot to the right I can see the full site.
I attached a screenshot so you can all see what I mean or just try opening http://sivantalmor.com and see by yourself.
Is there CSS I can use to fix this problem?
I'm not 100% sure what's causing this, but this seems to work:
Add the overflow-x: hidden; property to your div#main
Like so:
<div id="main" role="main" style="overflow-x: hidden;">
</div>
Edit:
The problem is here:
<div class="audio-player" style="direction: ltr;"></div>
You could remove direction: ltr; that's the one causing all this. But then you'll have to fix some margins for the element wrapping the album photo.
The exact problem is in the audioplayer part (#soundcheck_audio_player_widget-2).
Inside is the link .jp-pause, which is positioned wide outside the div to the left.
This causes the page to generate a long scrollbar to the left.
You can add overflow: hidden; to this Class: .jp-controls-wrap
.jp-controls-wrap {
overflow: hidden;
}
It does the trick!
I have just completed the following website but when I load it I seem to have an excess scroll.
Could you please give me feedback as to why and how could I resolve this issue.
I can post the code here but most people from the previous questions I have had over the last couple of days like a working example
So, the NAV element in the footer had a negative right margin, which caused a horizontal overflow, which in turn caused the scroll-bar to appear. I guess, your intention was to move the nav-items further to the right.
To get rid of the scroll-bar, just remove the negative margin, and instead set the width of the NAV to the appropriate value.
Try to add following line to your wrapper
overflow-x: hidden;
Try adding this css property to your <div id="wrapper"> element:
overflow-x: hidden;
Check this link for the official documentation of the overflow-x property.
Your css should look something like this:
#wrapper {
width: 100%;
height: 100%;
min-height: 100%;
position: absolute;
overflow-x: hidden;
}
I've tried it in Safari(version 5.1.7), Firefox(11.x) and Google Chrome(19.x) on a Mac Os and it works like a charm.
Hope it helps!
I'd like to have a scrollbar at the bottom of the div but this CSS works only in Firefox, not Webkit browsers like Safari or Chrome.
div.hoge {
width: 500px;
overflow: auto;
}
I googled and found some pages mentioning you should use overflow-x or -webkit-overflow-scrolling but they didn't work either. Need to use some JSs? Any guesses?
If you need a scroll bar to appear always then, you can use overflow: scroll
If you need vertical scroller then, overflow-y: scroll
If you need only horizontal scroller then, overflow-x: scroll
As per the questions title: You can write mozilla specific styles like this
#-moz-document url-prefix() {
div.hoge {
width: 500px;
overflow: auto;
}
}
Here is an example fiddle of a div that scrolls on x. If you don't include the white-space: nowrap, then the text just wraps within the div and only the vertical (y-direction) scroll bar actually scrolls.
The fiddle shows two div elements; one with nowrap and one without. Also I put borders on the div to make it easier to see.
overflow: auto; doesn't make scrolling DIV, use overflow: scroll;
if you want it on any particular axis, then use overflow-x: scroll; or overflow-y: scroll;
Have you tried overflow-x:scroll; ?
Also make sure that the div.hoge has the enough height to display the scroll bar at the bottom.