Is it possible to show the scroll bar in dojox mobile when the page is viewed from desktop browser?
This is my scrollablePane in which i want to show the scrollbar
<div id="resultViewScrollPane" data-dojo-type="dojox/mobile/ScrollablePane">
<div id="resultViewContentPane" data-dojo-type="dojox/mobile/ContentPane"></div>
</div>
To show the desktop browser scrollbar, you can override the overflow: hidden statement in dojox/mobile/themes/*/ScrollablePane.css in your own stylesheet:
.mblScrollablePane {
overflow: auto !important;
}
However, I don't think this is what you're looking for, as the client scrollbar seems to be pretty confused, because ScrollablePane is using webkit transforms to emulate scrolling in an inner div (see comments near top of dojox/mobile/scrollable.js). Try the above to see what I mean.
If you're just looking to keep dojox/mobile's custom scrollbar visible, you can override hideScrollBar() in scrollable.js, though it won't act like a normal desktop scrollbar (can't click and drag it, etc). I'd suggest not using a dojox/mobile ScrollablePane when the page is viewed on a desktop, and inserting a different widget such as a regular ContentPane.
Related
my web application has an and a SideNav (left) and horizontal Navigation on top.
The height of the is always based on the height of the loaded content. I have a "resizeMe" function for that.
But now I have the problem that the scroll bar flickers briefly when loading (of the iFrame) and then disappears again. Is there a way to make the scrollbar disappear by default in IE11?
I have already tried the following attributes on the :
<iframe name="Source"
id="Source"
src=""
frameborder="0"
scrolling=""
style="height: 905px; overflow: hidden; -ms-overflow-style: none;"
onload="resizeMe()">
</iframe>
height is calculated
Thanks! :)
I am having a site, which embeds another page,whose scrollbars are hidden and even do not show in IE 11(while loading). And the codes, I have used in the embedded site are:
scrollbar-width:none;
-ms-overflow-style:none;(You have used this, try the others)
::-webkit-scrollbar{width:0}You have used overflow:hidden; which not only hides the scrollbar but also disables scrolling, so using -ms-overflow-style:none; would be useless if you want to disable scrolling as you have already used overflow:hidden;. And the above codes hide the scroll-bar, but enables scrolling(unlike overflow:hidden;)
I would recommend you, that if you have embedded a site, which is owned by you, then try putting these codes in your embedded site. And I do not think that scrollbar style of iframe will be followed in major browsers according to this Stack Overflow answer.
I have a fixed position navbar, and buttons that open a sidebar menu on mobile. Only on IOS and Safari the sidebar doesn't show when you click on cart or account. Obviously, it's some sort of compatibility issue, but how can I work around or fix this?
https://walkpop.com/
I've seen some other threads on StackOverflow say its because Webkit translate doesn't work inside a fixed position parent, so I removed translate all together from my code to avoid rearranging the HTML. Right now I'm using JS to change the left values from -10000px to 0 on click.
This was the code given to me, and it's a pain to rearrange the HTML because of the styling attached to everything.
On desktop and Android, the website works completely fine. Only on IOS and Safari does the sidebar pull out, but you can only see the top bit of the sidebar.
Here is an image of the issue on IOS
This issues was caused because the parent element had a overflow: hidden; attribute. For some reason it was only hiding the sidebar on IOS. Once I removed that line, everything was fixed.
I am building a mobile website using Mobile Angular UI. After almost completion I tried to finally test it on my mobile devices. I realized that: when I scroll down the page, the navigation bar of the browser(i.e. Safari on iPhone, Chrome on Android devices) does not auto hide like it used to function when browsing normal websites.
Such as these website:
Mobile Angular UI Demo (My project's index.html is almost identical to this index.html)
wReader
Is there fix? Or is just a disadvantage of ng-view and I am going to have to deal with it?
Any outputs are greatly appreciated. Thanks in advance.
This cannot be solved, unfortunately, unless you want to use a different theme or make your own.
This is caused by the CSS. By default, scrolling in Mobile Safari doesn't feel native—the page scrolls more slowly compared to native apps.
In order to get smoother, bouncy, native-feeling iOS scrolling, a parent element (either a div or body) with a height of 100% of the window height is used and it has an overflow-y: scroll property.
Also, some of your theme's features (like the slide-out nav) may require this CSS implementation to work properly.
When scrolling, you are scrolling inside of that element—you are not scrolling the page. Mobile Safari will shrink the address bar when the page scrolls but when this CSS is added, it is detecting that the page does not need to scroll (because the parent element of all of the elements is 100% the height of the window and does not exceed that). This means that the page isn't scrolling and instead a child element on the page has content that is scrolling), Mobile Safari does not detect page scrolling. This cannot be changed. I have a similar implementation on my website.
I made a CodePen that shows how this effect is made. Due to the body (grey) not needing to scroll—because it is 500px tall which is less than the window height—the scrolling happens in one of the elements that allows scrolling. Mobile Safari doesn't know that you want this parent element to act like the whole page so unfortunately this can't be fixed. In the above pen, the blue element is the parent element that simulates the whole page. The child elements are just there to add height/scrollable content.
I'm trying to find a way to get rid of the bouncy scrolling behaviour on mobile devices (e.g. when there is no content below to scroll yet you are still able to do it and scroll content to top and when released it bounces back)
My html structure looks like this
<html>
<body>
<div id="wrapper">
<div id="container">
where all elements stretch to full height of the window. I tried overflow hidden on html and body, auto etc.. yet nothing seems to achieve a state where if you scroll than it doesn't scroll unless there is more content below.
It sounds like what you're looking for is to disable the scroll bounce for a UIWebView in iOS. If you're developing a native iOS app, you can disable the bounce by setting [WebViewObject].bounces = NO where [WebViewObject] is the UIWebView.
If you're just looking to prevent the bounce in the Safari mobile browser, I don't believe there's a way to do this.
I am building a mobile responsive website.
I noticed that when scrolling the page using an iPhone, the scroll is sticky and not smooth, while on android mobiles it's ok.
What can be the cause of this sticky scroll? I cant even see it on my browser! Please take a look at my code on JSfiddle. The images won't load but you don't need them anyway (you can see their borders). I recommend you to use 320px width to view the page so the icons are all organized.
So there is this line you can add to your body or the main div: -webkit-overflow-scrolling: touch;
Made the trick.