I created a web site that shows the directory list in the server. In backend all the directories are getting indexed and shown in an another webpage called dirpage. So I used an iframe in mainpage to show the content of dirpage. The mainpage and dirpage are working great. But when the dirpage is shown in the iframe, the content overflows. The iframe width is limited to the <div> width. The problem is the iframe overflow is taking a new line to show the content.
Here is the main page.
<head>
<style>
#divmain{
display: flex;
flex-direction: row;
}
#div1{
background: rgb(244, 236, 225);
width: 30%;
height: 600px;
float: left;
}
#div2{
background: black;
width: 70%;
height: 600px;
float: right;
}
#button1{
height:44px;
width:50px;
float:left;
}
#button2{
height:44px;
width:50px;
float:left;
}
#input1{
display:none;
float:right;
width:295px;
height:44px;
}
#iframe1{
height:500px;
width:390px;
background: transparent;
overflow: scroll;
}
</style>
</head>
<body onmousedown="buttonclick1(event)">
<h1>online storage</h1>
<div id="divmain">
<script>
function buttonclick1(e){
if (e.target.id !== "input1")
document.getElementById("input1").style.display="none"
}
function buttonclick2(e){
if (e.target.id == "button1")
document.getElementById("input1").name="folder"
if (e.target.id == "button2")
document.getElementById("input1").name="file"
}
</script>
<div id="div1">
<hr style="margin-top:0;">
<button id="button1" onclick="document.getElementById('input1').style.display='block'" onmousedown=buttonclick2(event)><a>Folder</a></button>
<button id="button2" onclick="document.getElementById('input1').style.display='block'" onmousedown=buttonclick2(event)><a>File</a></button>
<form id="form1" action="session" >
<input id="input1" type="text" name="">
</form><br><br>
<hr style="margin-top:10px;"><br>
<iframe id="iframe1" src="dirpage.html">
</iframe>
</div>
<div id="div2">
</div>
</div>
</body>
Here is an image of dirpage and mainpage. I can't add the code of dirpage. because the content are very sensitive. It doesn't contain anything other than <p> paragraphs and buttons.
Now what I need to do is show the overflown content with a scroll bar.
Not with a newline.
I tried overflow: scroll. But It's not working. Any help would be greatly appreciated.
From what I understood, your problem is that the iframe is not expanding by width and thus instead of staying on one line when exceeding the width it's creating a new line?
EDIT:
Ok after testing your page here's what I found. Initially after starting with a plaintext, it had css from the browsers that gave the text a <pre> tag with a white-space: pre-wrap; style, your problem can be fixed by removing the pre-wrap style from the css, the problem is you can only edit it from the Inspect Element menu.
On the other hand, after trying with an html file instead of a txt file, the "line break" only happens after adding a spacebar to the text, which is expected.
I'll see what I can do from here but I thought I would update to as opposed to keeping you waiting.
I recently had the same issue, and also tried overflow: hidden;, but it didn't work because there isn't a limit of how big the div can get.
So you need to limit the size of the div like: max-width: "width" and max-height: "height". Or just define the fixed width and height if you don't want it to scale.
Related answer: Overflow Scroll css is not working in the div
Edit:
If overflow: hidden; didn't work try applying it for overflow-x: hidden; & overflow-y: hidden;
Related
I have a div and for some reason I cant reduce its margin.
HTML
<div class="activebombgame">
</div>
CSS
.activebombgame{
height: 82vh;
width: 5vw;
background: black;
margin: 0;
}
This is from google chrome developer tools(blue = div, orange = margin)
Whole source code: https://www.hastebin.com/tapodoyuke.xml
Your code works fine see the fiddle here. Probably a surrounding tag is restricting the resize. Try something like taking ".activebomb" outside like
<div class="sorrounding">
</div>
<div class="activebombgame">
</div>
It sounds like it's your body margin. Many pages have one set by default. See the test below for an example. When you first run it, the body has a default margin. Clicking the button will remove it and line your div up with the page edge.
function change() {
document.body.style.margin = "0px";
}
.activebombgame{
height: 82vh;
width: 5vw;
background: black;
margin: 0px;
}
body {
background-color: lightgray;
}
button {
position: fixed;
left: 40%;
top: 20%;
}
<div class="activebombgame">
</div>
<button onclick='change();'>Remove Body Margin</button>
#Nisarg Shah,
You have added one extra closing div at the end, that's why your css is not working properly. Remove that extra closing div and run it.
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 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;
}
Is it possible to manually scroll a JPG inside a div with 'little hand' cursor by grabbing and draging the actual image?
Just when for example you have long horizontal bitmap and want to show it in small window so people scroll like in photo editors when you zoom in.
You need some JavaScript magic to do this. Check this out: http://jsfiddle.net/bCuGM/.
<style type="text/css">
#container {
width: 400px;
height: 400px;
overflow: hidden;
cursor: pointer;
}
#draggable {
width: 1024px;
height: 819px;
}
</style>
<div id="container">
<div id="draggable">
<img src="http://farm3.staticflickr.com/2593/3884464511_a77144821e_b.jpg">
</div>
</div>
<script>
$("#draggable").draggable();
</script>
You can do it by using javascript and a bit of css.
On your image add a css rule with :
cursor: pointer;
using javascript, add mousedown, mousemove and mouseup events on your image. Then use javascript to change the scroll on the parent div
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.