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.
Related
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>');
i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.
i want to solve this problem but i don't know how.
anybody knows how? so please guide me.
link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100
my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="inner-header">header</div>
</div>
<div class="body">body</div>
<div class="footer">
<div class="inner-footer">footer</div>
</div>
</body>
</html>
my css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
font-size: 30px;
text-align: center;
}
body{
background-color: orange;
}
.header{
border-bottom: 1px solid black;
}
.inner-header{
background-color: black;
}
.body{
height: 3000px;
background-color: blue;
}
.footer{
border-top: 1px solid black;
}
.inner-footer{
background-color: green;
}
.header,
.footer{
width: 100%;
height: 100px;
}
.inner-header,
.inner-footer{
height: 100%;
}
.inner-header,
.body,
.inner-footer{
width: 1000px;
margin: 0 auto;
}
#media screen and (min-width: 1200px){
.inner-header,
.body,
.inner-footer{
width: 1200px;
}
}
I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.
So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write
body {
overflow-x: hidden;
}
and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,
.main_container {
overflow: hidden;
}
There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
OR you could execute jQuery one,
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).
$.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;
or if you still can't find that particular element use this below trick,
//Open inspector -> “New Style Rule”:
* {
outline: 1px solid red;
}
You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.
Hope it helps someone. Happy digging.
I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?
* you should really not use that name for a class, it's unnecessarily confusing.
#media screen and (min-width: 1200px) {
body {
overflow-X: hidden;
}
.inner-header,
.body,
.inner-footer {
width: 1200px;
}
}
Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.
Codepen Demo
You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.
Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.
body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}
You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px
Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.
Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?
i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.
new link of code:
codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100
I have embedded an iframe n my page with content from another site.Here is a link if you want to visit it http://8mags.com/bored/wtf/wtf01.html
The problem is that I am unable to remove the scrollbars and a few other things.
My CSS code is here
html {
overflow-x: auto !important;
overflow-y: auto !important;
}
body {
overflow-y: auto !important;
background: white !important;
}
The problem is that scrollbar is still there.Also the background does not change to white inside iFrame.I also tried to hide a few details with this code
.quote-subtitle {
display: none !important;
}
but it does not work either.
EDIT
The code that produces the iFrame is this one
<span class="quora-content-embed" data-name="What-are-some-of-the-most-awesome-psychological-facts/answer/Arjun-Subramaniam/quote/2114886">Read <a data-width="541" data-height="893" class="quora-content-link" href="http://www.quora.com/What-are-some-of-the-most-awesome-psychological-facts/answer/Arjun-Subramaniam/quote/2114886" data-embed="nqjyswb" data-type="quote" data-id="2114886" data-key="78561af9adeb1d847ceae88107798254">Quote of Arjun Subramaniam's answer to What are some of the most awesome psychological facts?</a> on Quora<script type="text/javascript" src="http://www.quora.com/widgets/content"></script></span>
<body class=" logged_out" style="overflow: hidden;">
i use this on link and worked,and hidden the scrollbars.
or use this to access content of iframe
$('#iframe').contents().find('body').css('overflow','hidden');
I want to hide a scroll bar in page but I can scroll like it has a scroll bar.
so I cant use overflow:hidden because I want that I can scroll like normal
but cannot see a scroll bar.
so I use this css code (class not-scroll-body is a class of body tag)
.not-scroll-body::-webkit-scrollbar {
display: none;
}
It works in Chrome , but when I use -moz- instead of -webkit- like this
.not-scroll-body::-moz-scrollbar {
display: none;
}
It doesn't work in Firefox.
What can I do to to make it work?
Thank you for every answer and sorry for my poor english language :)
In firefox 64, if you want to hide scroll when you have overflow:auto you can now do scrollbar-width: none;! Woop woop! Here are the relevant docs (browser support is show at bottom of page).
Below is a simple css only solution that will hide your vertical and horizontal scrollbar in firefox (tested in v64 & firefox dev edition v65.0b8). Hint: try vertical and horizontal scrolling on the blue div.
.not-scroll-body {
overflow: auto;
height: 200px;
width: 90%;
background: linear-gradient(to bottom, cyan, blue);
white-space: no-wrap;
/* the line that rules them all */
scrollbar-width: none;
/* */
}
span {
width: 200%;
height: 400%;
background: linear-gradient(to left, green, yellow);
display: inline-block;
margin: 5rem;
}
<div class="not-scroll-body"><span></span></div>
According to this answer and everything I've been able to find on the web, there's no Firefox equivalent of the -webkit-scrollbar selector. Apparently there used to be a property, -moz-scrollbars-none, that you could use for this, but it's since been removed and people recommend using overflow:hidden or a hackish margin-right: -14px solution.
Sorry I can't be more helpful -- it seems like there's no Firefox way to do this elegantly.
I was able to hide the scrollbar but still be able to scroll with mousewheel with this solution:
html {overflow: -moz-scrollbars-none;}
Download the plugin https://github.com/brandonaaron/jquery-mousewheel and include this function:
jQuery('html,body').bind('mousewheel', function(event) {
event.preventDefault();
var scrollTop = this.scrollTop;
this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1));
//console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta);
});
cf: https://stackoverflow.com/a/41021131/4881677
This is how I do it, only CSS and works well with frameworks like bootstrap. It only needs 2 extra div:
You can select the text to make it scroll or scroll it with fingers if you have a touchscreen.
.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
overflow-x:hidden;
margin-bottom:-17px;
overflow-y:hidden;
width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x:auto;
width:100%;
padding-bottom:17px;
white-space: nowrap;
cursor:pointer
}
/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}
<html><body>
<div class="row">
<div class="col-xs-4 bg-orange">Column 1</div>
<div class="col-xs-3 bg-gray">Column 2</div>
<div class="col-xs-4 bg-blue">Column 3</div>
</div>
<div class="row">
<div class="col-xs-4 bg-orange-light">Content 1</div>
<div class="col-xs-3 overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
<div class="col-xs-4 bg-blue-light">Content 3</div>
</div>
</body></html>
Short version for lazy people:
.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
overflow-x:hidden;
margin-bottom:-17px;
overflow-y:hidden;
width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
overflow-x:auto;
width:100%;
padding-bottom:17px;
white-space: nowrap;
cursor:pointer
}
/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar">
<div>
<div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
</div>
</div>
I assuming you want to hide the scrollbar locally. In that i mean, not on a web server for the world to see, but on your local copy of firefox, for your 'viewing pleasure' only.
this is what I've found to work for me on opensuse/kde:
in userChrome.css;
#content browser {
margin-right -12px !important;
overflow-x:hidden;
overflow-y:scroll;
}
use -14px to completely hide vertical-scroll (more if your system theme has wider scroll setting). I use less (10px) to see just a little of it so I can middle-click to jump to a place on the page.
thing that i did, but don't always work, any longer:
in userContent.css
#content browser {
overflow:-moz-scrollbars-none;
}
-or-
html {
overflow: -moz-scrollbars-none;}
}
above used to work, but I now I've lost the mouse-wheel scroll. Only keyboard arrow keys work now.
Hope I understood what you want and this helps.
Landis.
You might be able to use overflow:-moz-hidden-unscrollable -- this worked perfectly for my needs in part because I was already using dragscroll.js.
As I was looking for it myself and this thread is not providing the updated answer, I would provide it for other newcomers as myself.
#element{
scrollbar-width: none;
}
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.