** UPDATE: I went to the settings at which my PDF was being rendered, and changed size to "Letter" instead of "A4" **
So DOMPDF is supposed to render an html page, yet with the settings I have, it's not rendering the background image to be margin-less (the bottom and right side still have margins).
Here's my css code on the HTML page being rendered:
#page { margin: 0px 0px 0px 0px; }
body {
background-image: url(../../picture.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Yet When rendered as PDF, here's how it looks:
It might be doing this based on the settings that it outputs as, but I'm not sure. It's being rendered as an 'A4' paper, as 'portrait' layout.
How would I be able to make the margins go away, so that it stretches all the way horizontally and vertically?
Dompdf (up to and including 0.7.0) does not currently support the background-size CSS declaration. Until that is fully supported by dompdf you can position an image using fixed positioning. You need to know the dimensions of the page and the margins, so you might want to declare those in your styling.
Try this in 0.6 or newer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#page {
size: 8.5in 11in;
margin: .5in;
}
#bgimg {
position: fixed;
left: -.5in;
top: -.5in;
width: 8.5in;
height: 11in;
z-index: -999
}
</style>
</head>
<body>
<img src="picture.jpg" id="bgimg">
</body>
</html>
I would like to ask for help with a specific issue. I've searched for similar questions, but haven't found any actual solutions. I'm rather new to CSS.
I'm trying to have a blue box called buttoncontainer that will have buttons in it later on. For now, I would like to format it so that the distance between the top edge of the browser window and the top edge of the blue box is always 42% of the window's total height. As the code below shows, I'm trying to achieve this by giving the box a top margin of 42%.
However, I can't do it. When I open the HTML file in Firefox or IE (which are what I have on my home desktop), the distance is clearly something different when the window is full screen. If it isn't and I start resizing it, the location of the box does NOT respond to vertical resizing at all. It does, however, respond to horizontal resizing, which I don't want it to do.
I imagine this MUST be a rookie mistake I'm making, but I just can't figure out how to get it right.
To reiterate, I want the distance between the top edges of the window and the blue box to always be 42% of the total window height.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<style type="text/css">
body {
background-color: #C94735
}
iframe {
background-color: #FFF;
border: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 63%;
height: 100%;
margin-left: 25%;
margin-right: 12%;
}
.buttoncontainer {
background-color: #00F;
border: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: 42%;
/* margin-bottom: auto; */
margin-left: 15px;
width: 25%;
height: 58%;
}
</style>
</head>
<body>
<div id="container" class="buttoncontainer">
</div>
<iframe id="content"></iframe>
</body>
</html>
A porcentual value for margin-top will be allways computed against the width of the containing element. Thats why your relative margin position is modified when the width of the viewport/container element is modified.
You could compute with javascript the value and assigned appropriately.
You could try as well (only css level 3) using viewport relative units. ( 1vw = 1% of viewport width and 1vh = 1% of viewport height)
Solution working here in this fiddle where i modified buttoncontainer class as so;
.buttoncontainer {
....
....
margin-top: 42vh;
}
I have a website here.
Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden.
In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the html or body tags.
Even if I set the viewport to a specific width in the <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
The site expands to the 1100px but still has the whitespace beyond the 1100.
What am I missing? How do I keep the viewport to 1100 and cut off the overflow?
Creating a site wrapper div inside the <body> and applying the overflow-x:hidden to the wrapper instead of the <body> or <html> fixed the issue.
It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.
Note: You may also need to add position: relative to the wrapper div.
try
html, body {
overflow-x:hidden
}
instead of just
body {
overflow-x:hidden
}
VictorS's comment on the accepted answer deserves to be it's own answer because it's a very elegant solution that does, indeed work. And I'll add a tad to it's usefulness.
Victor notes adding position:fixed works.
body.modal-open {
overflow: hidden;
position: fixed;
}
And indeed it does. However, it also has a slight side-affect of essentially scrolling to the top. position:absolute resolves this but, re-introduces the ability to scroll on mobile.
If you know your viewport (my plugin for adding viewport to the <body>) you can just add a css toggle for the position.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
I also add this to prevent the underlying page from jumping left/right when showing/hiding modals.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
As #Indigenuity states, this appears to be caused by browsers parsing the <meta name="viewport"> tag.
To solve this problem at the source, try the following:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
In my tests this prevents the user from zooming out to view the overflowed content, and as a result prevents panning/scrolling to it as well.
This is the simplest solution to solve horisontal scrolling in Safari.
html, body {
position:relative;
overflow-x:hidden;
}
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
works on iOS9
Keep the viewport untouched: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Assuming you would like to achieve the effect of a continuous black bar to the right side: #menubar shouldn't exceed 100%, adjust the border radius such that the right side is squared and adjust the padding so that it extends a little more to the right. Modify the following to your #menubar:
border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/
Adjusting the padding to 10px of course leaves the left menu to the edge of the bar, you can put the remaining 40px to each of the li, 20px on each side left and right:
.menuitem {
display: block;
padding: 0px 20px;
}
When you resize the browser smaller, you would find still the white background: place your background texture instead from your div to body. Or alternatively, adjust the navigation menu width from 100% to lower value using media queries. There are a lot of adjustments to be made to your code to create a proper layout, I'm not sure what you intend to do but the above code will somehow fix your overflowing bar.
Creating a site wrapper div inside the body and applying the overflow->x:hidden to the wrapper INSTEAD of the body or html fixed the issue.
This worked for me after also adding position: relative to the wrapper.
No previous single solution worked for me, I had to mix them and got the issue fixed also on older devices (iphone 3).
First, I had to wrap the html content into an outer div:
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
Then I had to apply overflow hidden to the wrapper, because overflow-x was not working:
#wrapper {
overflow: hidden;
}
and this fixed the issue.
Adding a wrapper <div> around the entirety of your content will indeed work. While semantically "icky", I added an div with a class of overflowWrap right inside the body tag and then set set my CSS like this:
html, body, .overflowWrap {
overflow-x: hidden;
}
Might be overkill now, but works like a charm!
I encountered the same problem with Android devices but not iOS devices. Managed to resolve by specifying position:relative in the outer div of the absolutely positioned elements (with overflow:hidden for outer div)
I solved the issue by using overflow-x:hidden; as follows
#media screen and (max-width: 441px){
#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
overflow-x: hidden;
}
}
structure is as follows
1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.
'end_screen is the wrapper of end_screen_1 and end_screen_2 div's
As subarachnid said overflow-x hidden for both body and html worked
Here's working example
**HTML**
<div class="contener">
<div class="menu">
das
</div>
<div class="hover">
<div class="img1">
First Strip
</div>
<div class="img2">
Second Strip
</div>
</div>
</div>
<div class="baner">
dsa
</div>
**CSS**
body, html{
overflow-x:hidden;
}
body{
margin:0;
}
.contener{
width:100vw;
}
.baner{
background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
width:100vw;
height:400px;
margin-left:0;
left:0;
}
.contener{
height:100px;
}
.menu{
display:flex;
background-color:teal;
height:100%;
justify-content:flex-end;
align:content:bottom;
}
.img1{
width:150px;
height:25px;
transform:rotate(45deg);
background-color:red;
position:absolute;
top:40px;
right:-50px;
line-height:25px;
padding:0 20px;
cursor:pointer;
color:white;
text-align:center;
transition:all 0.4s;
}
.img2{
width:190px;
text-align:center;
transform:rotate(45deg);
background-color:#333;
position:absolute;
height:25px;
line-height:25px;
top:55px;
right:-50px;
padding:0 20px;
cursor:pointer;
color:white;
transition:all 0.4s;
}
.hover{
overflow:hidden;
}
.hover:hover .img1{
background-color:#333;
transition:all 0.4s;
}
.hover:hover .img2{
background-color:blue;
transition:all 0.4s;
}
Link
easiest way to solve this , add
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
I had tried many ways from replies in this topic, mostly works but got some side-effect like if I use overflow-x on body,html it might slow/freeze the page when users scroll down on mobile.
use position: fixed on wrapper/div inside the body is good too, but when I have a menu and use Javascript click animated scroll to some section, It's not working.
So, I decided to use touch-action: pan-y pinch-zoom on wrapper/div inside the body. Problem solved.
I've just been working on this for a few hours, trying various combinations of things from this and other pages. The thing that worked for me in the end was to make a site wrapper div, as suggested in the accepted answer, but to set both overflows to hidden instead of just the x overflow. If I leave overflow-y at scroll, I end up with a page that only scrolls vertically by a few pixels and then stops.
#all-wrapper {
overflow: hidden;
}
Just this was enough, without setting anything on the body or html elements.
Setting overflow-x to 'clip' instead of 'hidden' also prevents unwanted scrolling on touch-devices, with wacom-pens, with shift-scrollwheel or any other programmatic scrolling. On the downside, it also prevents programmatic scrolling with javascript.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#clip
The only way to fix this issue for my bootstrap modal (containing a form) was to add the following code to my CSS:
.modal {
-webkit-overflow-scrolling: auto!important;
}
step 1: set position to fixed to the element that goes out from the viewport. In my case it is:
.nav-links {
position:fixed;
right:0px;
background-color:rgba(0,0,0, 0.8);
height:85vh;
top:8vh;
display:flex;
flex-direction:column;
align-items: center;
width:40%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
Step2: add a css property to body and html as:
body, html{
overflow-x: hidden;
}
I didn't add any wrapper. Only these two steps worked for me. The project I am working on is an angular project.
The following works
body,
.innerbodywrapper{
overflow-x: hidden;
position: fixed;
width: 100%;
height: 100vh;
}
Solution that properly work for mobile device with flex positionning top :
html,body {
width: 100%;
margin: 0;
padding: 0;
}
and in web page :
<meta name="viewport" content="width=device-width, user-scalable=0">
Don't forget to positioning this css in the different webpage main divs :
height : auto !important;
html, body{ overflow-x: hidden; position: relative; } Just try like this where you have added the overflow-hidden.
i'm stuck with a problem related to z-index in IE8.
Here's the fiddle:
http://fiddle.jshell.net/uFPBz/show/
The first problem is that the issue I want to show you is working in the fiddle, there's something I can't see that is fixing it.
However, if I save that entire fiddle page and open in IE8, the problem comes back. So, i'm like WTF?
When you mouseover the preview image, a bigger one shows up. But the bottom of this LARGER PREVIEW hides behind the SMALL IMAGE of the BOX that is below the mouseover'd Box.
This only happens in IE8, the largerPreviewBox has z-index of 3, while the ImgThumbBox has z-index of 2.
Reading this: http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/ and this IE 6 & IE 7 Z-Index Problem I see it these z-index properties are irrelevant because they are in other levels. But I don't know how to fix it.
Will be better if you download the HTML and see it by yourself:
http://www.filefactory.com/file/417sp9zi1lhp/n/HTML_Error_tar_gz
Thanks a lot!
Edit:
Image of the problem:
update the doctype
it will work fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
i tested on ie8
else you can press f12 and check your browser mode and document mode :-)
You can accomplish your task only with CSS and with less HTML lines. See the JSFiddle.
In your case the HTML is:
<div class="container">
<img src="imagenes/thumb.jpg" alt="Miniatura">
</div>
and you can use this CSS:
div.container{
position:relative;
display:inline-block;
float:left;
width: 122px;
height: 160px; }
div.container > img {
position:relative;
width: 122px;
height: 160px;
display:block;}
div.container > img:hover {
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -175px;
width: 300px;
height: 350px;
border:1px solid black;
//use other styles....
}