I am trying to create a Javascript Modern UI app. The problem is, vertical scrolling doesn't work. As I try to scroll using the mouse scroll, the page (HTML file) just stays there and does nothing, and it only displays the contents that are at the top of the page (the contents that fit on the screen at the beginning)
How can I enable vertical scrolling?
I realize this is several years old, but for me this was fixed by overriding the overflow property on the html element
html {
overflow: auto;
}
I found the solution. It's because of the height:auto property. Remove it and voila ~
Related
This is a very weird and specific bug that only happens on Firefox, and I'm having trouble narrowing it down.
I have a page with a sticky menu followed by a fluid container.
In order to remove all padding from the container while keeping everything else untouched (like column gutters), I had to add this CSS to it:
#main-container {
padding: 0;
overflow-x: hidden;
}
This is the only simple way I found to do that, and it works.
If you remove the overflow property, some horizontal scrolling appears.
See https://stackoverflow.com/a/35192643/5845942
But when I pin the menu, scroll until its position becomes fixed, and interact with certain items on the page, vertical space appears on the page, between the menu and the container.
This happens when triggering CSS transitions and other JS DOM manipulations.
Here is a jsfiddle: https://jsfiddle.net/vctls/mac2Ls0d/35/
A screenshot:
And a video:
https://imgur.com/a/28KhPEY
Again, this only happens on Firefox. Chrome handles the layout without any issue.
It doesn't happen either if the menu isn't pinned, or if you remove the overflow property from the container.
This seems to be a Firefox bug. I found a similar issue was already reported:
https://bugzilla.mozilla.org/show_bug.cgi?id=1618029
I'm trying to find a workaround.
I'm coding a website and getting a strange behavior on the vertical scrollbar. This is happening on Chrome, Safari, and Firefox.
On IOS, it apparently is causing issues with page scrolling (i.e., it is difficult to get the page to scroll past the bottom of the initial view)
The puzzling part is that the undesirable effect only occurs when the viewport is sized below 683px wide
683px wide and above, the vertical scroll bar behaves normally (see attached graphic)
Website url is http://157.245.80.107
Any suggestions or insight? Thanks!
The theme is badly coded.
Whoever made it didn't bother to read the intro on do's and dont's for Bootstrap v3.4.1.
The quickfix would be to remove
overflow-x: hidden;
from line 9 of _main.scss (on html, body) and apply it to .main-container instead.
Another problem (same cause, basically) is the presence of class row on #navigation2 .navigation-header .mobile-main-nav. Either remove it if you can edit that template, or apply this CSS to counter the negative margins:
#navigation2 .navigation-header {
padding: 0 15px;
}
I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
This works for me
html, body {width: auto!important; overflow-x: hidden!important}
Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.
To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.
Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.
It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
I have an iframe wrapped with a iframe-container div which is taking 25% of the screen from right, all the elements are inside the iframe.
There is a textbox input field in iframe, upon touch, all elements are behaving properly and the windows adjusts as per the keyboard of IPAD however the moment I start typing, i.e any character is being added in the text input the whole layout of iframe-container shifts towards left and then after few more character inputs disappears completely.
Refer to the image below:
Screen one (this is the desired UI all the time)
Screen Two (Messed up UI after any character is entered)
Even this layout disappears when more characters are added.
I went through few solved issues of iframe with IOS devices and followed few concepts and solutions from there.
Iframe in this case does not have any scroll added to it. A div inside the iframe is being scrolled
Have also tried adding -webkit-overflow-scrolling: touch; to the scrollable div and this did not helped either.
Was using VH for height, tried removing them and used PX no luck there too.
NOTE: A lot of jQuery is being used of UI adjustments, not particularly for iframe and the cross button basically toggles the iframe-wrapper div (simple hide and show).
Thanks!!
EDIT
I have found the problem, now I need the solution for this.
Safari is automatically adding background-position property and setting it to Initial, manually override to no-repeat fixes the problem.
I tried adding jQuery css property for background-position but I guess it is somehow not being applied.
This is weird but I discovered 0 property was not working and the moment I added left and top instead of bottom: 0 everything was fine!!
When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.