I am using the jScrollPane to add scroll bars to pages that exceed a certain height.
I can't figure out why the following page gets scroll bars even though the content is not overflowing my boundary.
Can anyone help please?
http://souk.gumpshen.com/test/contact.htm
In style.css there is a class applied to the html tag
html{
overflow-y: scroll;
}
If I remove this style and zoom out then the scroll bars go away. I think it depends on the zoom level of the browser. If the user is set at a low resolution or zoomed in the contents do overflow.
Related
I'm currently working on my very first personal page! I'm getting horizontal scroll on smaller media queries where I shouldn't and I cant track down the culprit. All containers are set to 100% width and have their overflow-x hidden. Once the page reaches 1200px in width the side navigation collapses, however once you toggle the 'hamburger' the menu should slide out and push the contents of the main section out and hide the overflow until an anchor point is selected in the menu. At which point the page should shift back to where it was and scroll to the desired section. Something I didnt notice until I turned on touch simulation in the dev tools is that its completely busted on mobile with touch, however working fine with browser scroll in mobile view.
If anyone has any thoughts please let me know, you can find my site here: https://imaleks.dev/
Sorry in advance if this breaks any ettiquite new to all this.
I think, when all you containers are width: 100% + translateX(290px);, and this is more then 100%. You should toggle some class to a body with overflow-x: hidden; when the mobile menu is active.
Or you can keep overflow-x: hidden; for body permanent. This will completely disable horizontal scroll.
I have a div with with the following css:
.long-table-container {
overflow-x: auto;
}
Instead of attaching scrollbars to .long-table-container, I would like to instead use the browser's scrollbars to do the job. Is this possible?
The reason I need to do this is because I have a long table in .long-table-container and the only way to scroll left and right is by scrolling all the way to the bottom of the page and then moving horizontal scroller of .long-table-container which is a pain for any user.
Fiddle: http://jsfiddle.net/ox5qzp1x/
You can create additional scrollable element with fixed position at bottom of the page and connect these two elements, like in question Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window
my problem is that when I scroll down in an mobile browser where the menu bar vanishes (e.g. chrome) my background tries to adjust for the larger screen height.
When scrolling up again the menu bar of chrome appears again and reduces the screen height calling my background to shrink again and then suddenly jumps to the beginning of the page.
This looks like hickups and destroys the usability of the page.
the domain is www.kaufbar-muelheim.de
Any clues how to resolve this problem?
THX
Philipp
You can remove the div id="maximage", and do all the work on the body.
Just give the body the following css:
body {
background-size: auto 100%;
}
And cycle the background by changing the background-image on the body tag.
This will avoid all the calculations for the image size, and gives you the same result.
The problem, is that you would probably have to preload all the background images somehow. As the images are not in the DOM anymore.
I'm editing a wordpress theme and I want the main content area to be larger. But when I enlarge it beyond the limits of the screen it does not scroll. And I know the most common cause of this problem is position: fixed, but I only found two cases of this in the code and when disabling both it doesn't fix the issue.
The original code makes a div with the id of "content" have a scrollbar, but I made the div much larger and so I want the scrollbar to appear and be back in the default spot like most pages have it.
Resources: Here is the original page for reference. (You can just inspect the code from there since I haven't made any edits to it yet anyway.)
http://themes.themolitor.com/wpzoom/2011/04/first-blog-post-title/
You page has been setup in such a way that, a javascript file is placing an inline style to the content, and giving a dynamic height depending on the screen size.
and the content id has a overflow auto, which gives a scroll bar when the content overflows outside the parent element.
So if you wan to have the scroll bar removed either do "overflow: hidden;" (this will hide the content which overflows unfortunately.
Or you will have to rearrange the whole page structure.
Your problem seems to be in http://themes.themolitor.com/wpzoom/wp-content/themes/wpzoom/style.css, where html and body are set to overflow:hidden. If the content extends past the end of the page, it will not scroll. You can change it to overflow:auto (auto adds a scroll bar when there's too much content to fit), or you can just get rid of the overflow property because auto is the default behavior.
overflow:scroll /* always show a scroll bar */
overflow:auto /* show a scroll bar when the content of a box is bigger than the box itself */
overflow:hidden /* never show a scroll bar */
I'm digging google for an hour now, to find out why google chart api makes it's parent dom to overflow.
Scrollbars appear every time I draw the chart
As you can see there is no padding or margin. When I use default settings for chart.draw() I got the same result.
How can I make the chart to just fit in it's container?
(overflow: hidden is not a good solution here, because the chart itself also overflows and I don't want to cut it off)
Thank you in advance for any help!
Update: JsFiddle
In your case the problem is basically that you specify a height to #chart, and set it to overflow-y: auto. This will cause the vertical scollbar to appear, and since you set the width: 100%, and the vertical scrollbar takes space, a horizontal scrollbar appears. Remove the overflow-y: auto declaration and you're good to go. I suggest you remove the height: 350px as well