I tried to add right scroll in div. This works in most browsers, but not properly when using iPad Safari. Does the iPad not suported this css attribute?
I prepared test html. It do not work too.
<html>
<head>
<style>
.ounner {
border: solid 1px red;
width:300px;
height: 500px;
overflow:scroll ;
}
.inner{
border: solid blue 1px;
height: 700px;
width: 400px;
}
</style>
</head>
<body>
<div class="ounner">
<div class="inner">
sdsd
</div>
</div>
</body>
</html>
overflow: auto and overflow: scroll are supported on MobileSafari, but since scrollbars are not used on iOS, to scroll these areas one must use two fingers.
There is a JavaScript library called iScroll that handles touch events and implements one-finger momentum scrolling manually; perhaps that would be worth looking into.
I have used css:
-webkit-overflow-scrolling: touch;
and scrolling works with 1 finger as well (iPad 2, iOS 5.1.1).
Hope it helps, Filip
Related
I have created a scrollbar and it works perfectly fine in google chrome and firefox but not in IE. I have a feeling it has to do with the line-height property.
My Code:
Html:
<div id="scrollbar"><br /></div>
Css:
#scrollbar {
margin-top: 10px;
height: 220px;
float: right;
overflow-y: scroll;
line-height: 403px;
}
Here is my jsfiddle.
Anyway to get this to work in IE?
Change the <br/> to a . IE picks up the non-breaking space a bit better than just a <br> tag.
http://jsfiddle.net/s9sycey1/3/
I figured it out. Instead of <br /> I used <span class="hidden">/</span> and I set my css to .hidden { visibility: hidden }. Here is my updated jsfiddle.
I have recently noticed a scroll-behavior property that I can specify in my css. It can take only 2 properties: inherit and initial. I have never heard/seen it before, so I tried to look at it. The problem is that all the links are going into explaining different things about overflow property.
Then I tried to test it.
<div id="scroll">
<div id="inside">
</div>
#scroll{
width: 100px;
height: 500px;
scroll-behavior: inherit;
overflow: auto;
border: 2px solid black;
}
#inside{
height : 1000px;
}
The problem is that I see no difference. So what does it do?
Noticed it pop up in my Chrome Inspector as well, which lead me to this post...
What is the Scroll-Behavior?
Specifically referred to as CSSOM-View 'Scroll-Behavior' property, the css property was created to integrate more flexibility in CSS for DOM item scrolling. Most 'scroll-to' options that are built for websites are typically built on a JS library or plugin. Like others have mentioned, here is the release documentation - http://dev.w3.org/csswg/cssom-view/#scrolling
The current adopted scroll-behavior of the DOM is set to by anchor tags (example: Click Me). When this CSS property is fully adopted in all browsers, and correctly implemented (Check out this discussion : https://groups.google.com/forum/#!topic/mozilla.dev.platform/mrsNyaLj3Ig). You will be able to toggle the 'instant' anchor tag scroll to more of to a 'smooth' scroll.
The real question is when we this property be available in edge browsers? Currently, it is recognized by Firefox & Chrome, but the property is not 'Active' as far as research has gone.
nav{ float:left }
#scroll {
width: 350px;
height: 500px;
scroll-behavior: smooth;
overflow: scroll;
border: 2px solid black;
}
#inside1 {
height: 1000px;
background-color: blue;
}
#inside2 {
height: 1000px;
background-color: orange;
}
#inside3 {
height: 1000px;
background-color: red;
}
<nav>
#1
#2
#3
</nav>
<div id="scroll">
<div id="inside1"></div>
<div id="inside2"></div>
<div id="inside3"></div>
</div>
Check out the JSFiddle to see the implementation of how the instant scroll via anchor tags currently works through the DOM - http://jsfiddle.net/timcasonjr/5t0so7n7/3/
I'm trying to get my top sentence (<p>geornvgowegnoewpgnerognm</p>) to be hidden inside a div and I'm not sure if this is possible but one thing for sure is that the overflow-y style is not working as expected, or maybe I'm doing something terribly wrong. Basically I expect no scroll bar and I get a horizontal one even though Mozilla says it should hide the content horizontally. I'm using Firefox 28 beta but that shouldn't matter no?
Here's the code,
<html>
<head>
</head>
<body>
<style type = "text/css">
#div_1
{
overflow-y:hidden;
height: 100px;
width: 100px;
top: 50%;
left: 50%;
background-color: white;
}
body
{
background-color: black;
}
p
{
font-color: blue;
font-size: 20px;
margin: 0 auto;
}
</style>
<div id = "div_1">
<p>geornvgowegnoewpgnerognm</p>
<p>eornvgowegnoewpgnerognm</p>
<p>ornvgowegnoewpgnerognm</p>
<p>rnvgowegnoewpgnerognm</p>
<p>nvgowegnoewpgnerognm</p>
<p>vgowegnoewpgnerognm</p>
<p>gowegnoewpgnerognm</p>
<p>owegnoewpgnerognm</p>
<p>wegnoewpgnerognm</p>
<p>egnoewpgnerognm</p>
<p>gnoewpgnerognm</p>
<p>noewpgnerognm</p>
<p>oewpgnerognm</p>
<p>ewpgnerognm</p>
<p>wpgnerognm</p>
<p>pgnerognm</p>
<p>gnerognm</p>
<p>nerognm</p>
</div>
</body>
</html>
Another way to do it is
1) Visually hide the paragraph tag. It will keep it's space in the div as though its there, just not visible.
#div_1 p:first-child {visibility: hidden;}
or 2) visually remove the paragraph tag. It look as though it's not there, all other paragraph tags will move up in it's place.
#div_1 p:first-child {display: none;}
To get rid of the horizontal scrollbar, use overflow-x:
overflow-x: hidden;
overflow-y, hides the overflow in the y direction. As in up and down, which would hide a vertical scrollbar.
I'm using an iFrame on the following website for the Online Booking system as shown below:
http://www.marandy.com/one2onev2
The iFrame should only display a scroll bar on the y-axis. In Firefox, IE and Safari this is working as expected, however in Google Chrome this is still showing both scroll bars (y & x).
Here is the code:-
HTML
<div id="main-online-booking">
<iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" frameborder="0"></iframe>
<div id="main-online-user">
<img alt="One 2 One Account" id="img-onlinebooking-acc" src="images/account.png" />
<img alt="One 2 One Guest" id="img-onlinebooking-guest" src="images/guest.png" />
</div>
</div>
CSS
#main-online-booking {
height: 488px;
border-bottom: 6px #939393 solid;
border-left: 6px #939393 solid;
border-right: 6px #939393 solid;
z-index: 4;
background-color: #fff;
}
#main-online-frame {
overflow-x: hidden;
frameBorder: 0;
height: 488px;
}
The overflow-x: hidden property appears to only not be working in Google Chrome on iFrames, any suggestions?
Add in Your iframe scrolling="no" and increase height #main-online-frame.......
On page inside your iframe (http://www.marandy.com/one2oneob/login-guest.php), add this html {overflow-x: hidden; overflow-y: auto;}.
And check initial height of page inside iframe. Make sure that initial height fits in height of iframe.
I ran into this same issue where Chrome was not applying overflow-x:hidden correctly, but all other browsers were. It wasn't an iFrame, but rather a div. I struggled with this for about 4 weeks and finally found that if I simply apply position:relative to that same div, it will work properly. Hopefully this is helpful to someone.
When measurements are specified in cm or inches for an element, it is printed at exactly that size from Firefox and Internet Explorer. Chrome on the other hand makes the elements bigger.
Is there anyway to make Chrome print things at exactly the specified size, or is it something I'll just have to live with?
E.g.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
The above code prints an exact 5cm (on my printer) in both Firefox and IE, but prints at about 5.5cm from Chrome.
I have found this issue too.
After playing with MANY wasted sheets of paper, I've found that Chrome tries to scale the HTML.
For example, add a full width div to your sample below and it'll resize the box correctly, because you're asking Chrome to make the box 100% of the page and thus forcing a 1:1 scale of the page.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 100%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
Unfortunately, when I tried this, it didn't fix the height issue, but also I couldn't make the box 0px without it losing correct scaling.
Incidentally, take a look at the following to show how it affects the sizes when printed.
<!doctype html>
<html>
<head>
<style type="text/css">
div.box {
border: 1px solid black;
width: 5cm;
}
div.forcer {
width: 200%;
height: 1px;
border: 1px dotted green;
}
</style>
</head>
<body>
<div class="box">box</div>
<div class="forcer"></div>
</body>
</html>
In a nutshell: Chrome's printing capabilities are shocking!
Firefox works far better for printing, but runs much slower.
The solution with a 100% wide div doesn't work for me on the current Chrome version, but this works, for an A4 paper:
html, body {
width: 210mm;
}
For Chrome, just set the print margins to something, and set the body to the width of the paper, minus the margins.
E.g. For an A4 page, the width is 210mm
So for 1 inch margins (roughly 2.5cm) you can do the following
#media print
{
#page
{
margin-left: 25mm;
margin-right: 25mm;
}
body
{
width: 160mm;
}
}
The left, right, and width of the body should add up to 210mm.
For letter you'd use 1 inch margins, and a 6.5 inch width on the body.
I confirmed that I had the same issue when using your HTML, even when trying to specify some CSS rules to get rid of obvious suspects like padding and margins. From the research I've done, it looks like you're simply dealing with inconsistent browser standards when rendering media queries. If possible, I would recommend conditionally styling the box based on browser.
One other aspect seems to be that not specifying a Doctype (which is a bit of a no-no in development anyway) can lead to inconsistencies.
You can go ahead and see this topic for some more reading about the issue:
Firefox versus webkit measurements for media queries based on width