The scrollbar on my iframe will not stay visible. It appears when the iframe first loads, then fades away.
I have tried:
putting scrolling="yes" in iframe tag
adding overflow: -moz-scrollbars-vertical in css
adding overflow-y:scroll in css
None of these work.
#iframe {
overflow: -moz-scrollbars-vertical !important;
overflow-y:scroll;
}
<iframe class="iframeclass" id="frame" src="" width="650" height="350" frameBorder="0" scrolling="yes"></iframe>
I think this is a Mac issue, since many Mac users disable the vertical scroll bar since they just use their trackpad. I tried the following (from this answer):
.iframeclass::-webkit-scrollbar {
-webkit-appearance: none;
}
.iframeclass::-webkit-scrollbar:vertical {
width: 11px;
}
.iframeclass::-webkit-scrollbar:horizontal {
height: 11px;
}
.iframeclass::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.iframeclass::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
But still does not work.
Check this:
<div class="scroll-wrapper">
<iframe src=""></iframe>
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* important: dimensions or positioning here! */
}
.scroll-wrapper iframe {
/* nada! */
}
.demo-iframe-holder {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.demo-iframe-holder iframe {
height: 100%;
width: 100%;
}
This supports all browsers.
Check Article for more info: Article
Related
I tried css to customize the scrollbar in the java Swing embedded javafx webview, I use the same css for displaying two web pages, the scrollbar cannot be customized as expected as in css, but the other one can be customized very well, do anybody know if there is some limit on the web page display? Thanks!
Html is the third party web page:
Here follows the css scripts:
body {
overflow-y: scroll;
overflow-x: scroll;
width: 1000px;
height: 1000px;
position: absolute;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 120px !important;
height: 120px !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: rgba(255,0,0,0.8);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Your scrollbar CSS is right but you put the wrong CSS in body and inner HTML.
body{display: block; overflow: auto; height: 1000px; width: 100%; box-sizing:border-box;}
body::-webkit-scrollbar {width: 5px; height: 8px; background-color: red; }
body::-webkit-scrollbar-thumb {background: #000; }
<body>
this just test for scroll
</body>
On my page, the top center embedded YouTube video (iframe) fills the entire responsive container on Firefox, but for some reason it is displayed much smaller and only in the upper half of the container on Chrome:
HTML:
<div class='product_frame_wrap'>
<div class='product_frame'>
<div class='product_frame_image_vid'>
<iframe>...</iframe>
</div>
</div>
</div>
CSS:
.product_frame_wrap {
margin: 0 auto;
max-width: 600px;
position: relative;
width: 100%;
}
.product_frame {
background: rgba(0, 0, 0, 0) url("images/frame.png") no-repeat scroll 50% 50% / contain ;
padding-bottom: 75%;
position: relative;
}
.product_frame_image_vid {
bottom: 0;
left: 0;
padding-top: 5%;
position: absolute;
right: 0;
top: 0;
}
.product_frame_image_vid iframe {
height: 100% !important;
width: 100% !important;
}
If you look up browser specific css you can find hacks. The below code will only effect chrome browsers. When you set the iframe's height to 200% it seems to fill in correctly in chrome.
Adding the below snippet to your css should fix the problem:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.product_frame_image_vid iframe { height:200%; }
}
I am using the code available here in my fiddle here.
The problem is that the text in the info window is appearing like this:
It should say: You are here. (in a single line)
Using Firebug, I changed the text's parent style to have width 75px but then a horizontal scrollbar appeared on the text in the info window. I tried to hide that scrollbar using Firebug and it worked but when I put it in the code, the scrollbar appears again.
CSS:
*{
margin: 0;
padding: 0;
}
body{
font-family: arial;
font-size: 62.5%; /* so, 10px = 1rem */
}
#button-container{
}
button{
color: white;
background: #4196c2;
border: 0rem;
border-radius: 0rem 0rem 0.5rem 0.5rem;
padding: 0.5rem;
outline: none;
display: block;
margin: 0 auto;
}
#show-hide{
height: 1.5rem;
line-height: 0;
}
#map-canvas{
z-index: -1;
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.gm-style-iw div{
/*width: 75px;
overflow: hidden;*/
}
.gm-style-iw div div{
/* overflow: hidden;*/
}
How do I fix this?
You can control infoWindow content width by putting html with inline styles in its content like this:
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: '<div style="width: 75px">You are here.</div>'
});
this width is changed dynamically and put into inline styles which have priority over css, thats why it gets overriden even when you put changes in css
I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page.
See this Live example!
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
<div class="book">
<div class="page">
<div class="subpage">Page 1/2</div>
</div>
<div class="page">
<div class="subpage">Page 2/2</div>
</div>
</div>
I think I'm forgetting something. But what would it be?
Chrome: clipping page, double page (it's just what I need it to work)
Firefox: it works perfectly.
IE10: believe it or not, it's perfect!
Opera: very buggy on print preview
I looked into this a bit more and the actual problem seems to be with assigning initial to page width under the print media rule. It seems like in Chrome width: initial on the .page element results in scaling of the page content if no specific length value is defined for width on any of the parent elements (width: initial in this case resolves to width: auto ... but actually any value smaller than the size defined under the #page rule causes the same issue).
So not only the content is now too long for the page (by about 2cm), but also the page padding will be slightly more than the initial 2cm and so on (it seems to render the contents under width: auto to the width of ~196mm and then scale the whole content up to the width of 210mm ~ but strangely exactly the same scaling factor is applied to contents with any width smaller than 210mm).
To fix this problem you can simply in the print media rule assign the A4 paper width and hight to html, body or directly to .page and in this case avoid the initial keyword.
DEMO
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
/* ... the rest of the rules ... */
}
This seems to keep everything else the way it is in your original CSS and fix the problem in Chrome (tested in different versions of Chrome under Windows, OS X and Ubuntu).
CSS
body {
background: rgb(204,204,204);
}
page[size="A4"] {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
#media print {
body, page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
HTML
<page size="A4"></page>
<page size="A4"></page>
<page size="A4"></page>
DEMO
https://github.com/cognitom/paper-css seems to solve all my needs.
Paper CSS for happy printing
Front-end printing solution - previewable and live-reloadable!
I’m using CSS stylesheets. When I run my web page, a horizontal scroll bar and vertical scroll bar is displaying. I want to display the web page in a browser without horizontal and vertical scroll bars. How do I set a page width and height according to the browser page?
CSS code:
body
{
margin: 0 auto;
padding: 0;
background-color: #000000;
}
#art-main
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}
#art-page-background-simple-gradient
{
position: absolute;
background-image: url('images/Page-BgSimpleGradient.jpg');
background-repeat: repeat-x;
top:0;
width: 00%;
height: 0px;
}
.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}
form
{
padding:0 !important;
margin:0 !important;
}
table.position
{
position: relative;
width: 100%;
table-layout: fixed;
}
/* end Page */
/* begin Box, Sheet */
.art-Sheet
{
position:relative;
z-index:0;
margin:0 auto;
width: 800px;
min-width:px;
min-height:px;
}
.art-Sheet-body
{
position: relative;
z-index:1;
padding: 12px;
}
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl, .art-Sheet-tc, .art-Sheet-bc,.art-Sheet-cr, .art-Sheet-cl
{
position:absolute;
z-index:-1;
}
.art-Sheet-tr, .art-Sheet-tl, .art-Sheet-br, .art-Sheet-bl
{
width: 76px;
height: 76px;
background-image: url('images/Sheet-s.png');
}
.art-Sheet-tl
{
top:0;
left:0;
clip: rect(auto, 38px, 38px, auto);
}
.art-Sheet-tr
{
top: 0;
right: 0;
clip: rect(auto, auto, 38px, 38px);
}
.art-Sheet-bl
{
bottom: 0;
left: 0;
clip: rect(38px, 38px, auto, auto);
}
.art-Sheet-br
{
bottom: 0;
right: 0;
clip: rect(20px, auto, auto, 38px);
}
.art-Sheet-tc, .art-Sheet-bc
{
left: 38px;
right: 38px;
height: 76px;
background-image: url('images/Sheet-h.png');
}
.art-Sheet-tc
{
top: 0;
clip: rect(auto, auto, 38px, auto);
}
.art-Sheet-bc
{
bottom: 0;
clip: rect(38px, auto, auto, auto);
}
.art-Sheet-cr, .art-Sheet-cl
{
top: 20px;
bottom: 20px;
width: 76px;
background-image: url('images/Sheet-v.png');
}
.art-Sheet-cr
{
right:0;
clip: rect(auto, auto, auto, 38px);
}
.art-Sheet-cl
{
left:0;
clip: rect(auto, 38px, auto, auto);
}
.art-Sheet-cc
{
position:absolute;
z-index:-1;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background-color: #FFFFFF;
}
.art-Sheet
{
margin-top: -5px !important;
}
#art-page-background-simple-gradient, #art-page-background-gradient, #art-page-background-glare
{
min-width:800px;
}
/* end Box, Sheet */
The above stylesheet is displaying a page with vertical and horizontal scroll bars. I don't want to display like that. The page should fit in the browser.
To disable scrollbars, use the following
body {
overflow: hidden;
}
If you wanted to detect the browser window size, then you'd need javascript
A useful tip:
overflow-x:hidden /* hides the horizontal scrollbar */
overflow-y:hidden /* hides the vertical scrollbar */
overflow:hidden /* hides ALL overflowing content, ofcourse disabling the scrollbars */
.. and this applies to ANY element/selector.
You’ll get a vertical scrollbar on your web pages when the content is taller than the browser window. That’s normal. It happens on pretty much every website ever published. For an example, see Stack Overflow.
As for the horizontal scrollbar, that happens when the content is too wide for the browser window. By default, HTML content makes itself as wide as possible within the browser window, and no wider. You must be setting something to be wider than the browser window.
If you could post your HTML, we should be able to work out what it is.
first of all, i'd remove the body margin.
and set whatever margin you want on a container div or something.
Here are some useful script to get the height and weight of the browser window: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
With the following code you can set a block element (div) to the width of the browser viewport.
...
<body>
<div class="fullwidth">Test test</div>
</body>
...
And the CSS:
.fullwidth { width: 100% }