I'm trying to hide the scrollbar for an iframe and it's not working. Here's my HTML:
<style>
.no-scrollbar::-webkit-scrollbar {
display: none
}
.no-scrollbar {
overflow: none
}
</style>
<iframe class="no-scrollbar" id="iframe">zzz</iframe>
<script type="text/javascript">
var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('<body style="width: 110%">zzz</body>');
doc.close();
</script>
Here's my fiddle:
https://jsfiddle.net/9a7k2dgn/
I can change it by changing the width to 90% (altho apparently not even 100% works; 90% does but not 100%) but, for the purposes of this example, let's assume that's not an option. And it's none-the-less my understanding that overflow: none should work regardless.
The scroll appeared is the scroll inside iframe content, not the scrollbar of iframe selector.
To hide this, you need to implement overflow: hidden on iframe body style as follows.
doc.write('<body style="width: 110%; overflow: hidden;">zzz</body>');
For those people who are having issue with the navbar not scrolling (https://startbootstrap.com/template-overviews/sb-admin/). There might be a better way to do this, but I fixed it by adding the following to the css file.
.navbar-sidenav {
overflow-y: auto !important;
-ms-overflow-style: none !important;
}
.navbar-sidenav::-webkit-scrollbar {
width: 0px !important;
display: none !important;
}
Good luck,
Greg
Took a while to figure this out. The above code allows for scrolling but the overflow messed up the tooltip. Had to modify a few other things to make it work. Add the extra css code below, change the javascript function below and add the class to the html file like the code below. Hope this helps some others...
CSS
.sidenav-not-toggled {
overflow-x: auto !important;
}
.navbar-sidenav {
-ms-overflow-style: none !important;
}
.navbar-sidenav::-webkit-scrollbar {
width: 0px !important;
display: none !important;
}
JavaScript
// Toggle the side navigation
$("#sidenavToggler").click(function(e) {
e.preventDefault();
$("body").toggleClass("sidenav-toggled");
$(".navbar-sidenav").toggleClass("sidenav-not-toggled");
$(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
$(".navbar-sidenav .nav-link-collapseLink").addClass("collapsed");
$(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show");
});
HTML
<ul class="navbar-nav navbar-sidenav sidenav-not-toggled" id="dashboardAccordion">
Can't seem to make the iframe appear with a scroll-bar.
Go to https://billiving-qa.azurewebsites.net/accountant
email: qa#billiving.com
pass: 111111
Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar.
My css uses the following:
.frm {
position: fixed; width: 100%; height:100vh; overflow-y:scroll !important; overflow-x:hidden !important;
}
html is as follows:
<iframe frameborder="5" class="frm" ng-src="{{trustSrc(url)}}" scrolling="yes"></iframe>
You have hidden scrollbars in ionic.app.css:
::-webkit-scrollbar {
display: none;
}
I don't know if it is possible to override this style so probably you have to remove it. Similar question.
I used style="overflow: hidden;white-space:nowrap;"
scroll bar is removed , but the arrows are not getting removed , for a body tag
Use:
style="overflow-y: hidden;"
You should not really not use inline styles. Try write it like this:
<head>
<style="text/css">
#container { overflow: hidden; }
</style>
</head>
<body>
<div id="container">Content goes here</div>
</body>
Could I see your code if that does not work as I can't see what you have done.
EDIT:
Not sure if I completely get what you are trying to achieve.
Add the following style to the page.
<style="text/css">
.hideOverflow { overflow: hidden; }
</style>
Are you using jQuery?
If so, add this within your window.open event.
$('body').addClass('hideOverflow');
Can I see your window.open script?
I have an app built on Cordova and on some of my pages I am able to scroll horizontally out of my content into white space.
This is weird as I have nothing there that extends beyond my #wrapper, which is set to width: 100%.
So I was wondering if there was a way I could disable horizontal scrolling in the app altogether?
UPDATE:
Code on page as requested:
body {
background-color: #fff;
font-family:Arial, Helvetica, sans-serif;
color: #b7b8b9;
height: 100%;
width: 100%;
}
iframe{
border: none;
width: 100%;
/*margin-top: 50px;*/
}
#header{
height: 50px;
width: 100%;
}
<body>
<div id="wrapper">
<div id="header">
<div class="headerback">Home</div>
<div class="headerrefresh"><script>var pathname = window.location.pathname;</script><script>document.write('Refresh')</script></div>
<div class="headertitle"><h2>Get the Look</h2></div>
</div><!--HEADER-->
<iframe src="http://www.mbff.com.au/getthelook"></iframe>
</div>
</body>
Try to debug your page in Chrome (webkit) with the exact dimensions of your device. This solves most rendering issues for me.
I do not know the specific issue here, but it looks like one of your elements is flowing outside of the wrapper. You could for example try this in your css:
div.wrapper { overflow: hidden; width: inherit; }
Although it might be a better idea to find out why your page is expanding horizontally?
I was looking for the solution to this problem for a long time.
Finally I solved it in the following way.
I set style for bodyand html tags:
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
After that I've added div to body and set the style for it:
overflow-y: auto;
height: 100%;
So, I have got fixed body, which contains div with vertical scroll bar.
// Phone Gap disable only horizontal scrolling in Android.
// Add this code in your Phone Gap Main Activity.Initially Declare the variable
private float m_downX;
//Then add this code after loadUrl
this.appView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
// save the x
m_downX = event.getX();
}
break;
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP: {
// set x so that it doesn't move
event.setLocation(m_downX, event.getY());
}
break;
}
return false;
}
});
Try adding the following code to your .html file:
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
For the sake of completeness, I thought the answer which makes use of the official method of doing such a thing via the preference tag should be added:
<preference name="DisallowOverscroll" value="true"/>
Supported by Android and iOS according the documentation.
Default: false
Set to true if you don't want the interface to display any feedback when users scroll past the beginning or end of content. On iOS, overscroll gestures cause content to bounce back to its original position. on Android, they produce a more subtle glowing effect along the top or bottom edge of the content.
In my case it was broken styling like below
<body>
<div style="margin-left:5%; width:100%">Content</div>
</body>
which cause div to became horizontally bigger than body. I could see scroll when app run in browser. Set width to 90% (as it was initially intended) fixed the problem.
Generally, as it already pointed out here, enough to find element with wrong style which makes your page expanding horizontally and fix it.
BTW DisallowOverscroll was not helpful in above case.