I am trying two things :
Show content on a modal as how it would appear on an A4 page
windows.print() the modal on an A4 page through major browsers
Following is my CSS:
.page {
width: 210mm;
min-height: 297mm;
padding: 20mm;
margin: 10mm 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 black solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
margin:0 !important;
padding:0 !important;
height:100% !important;
visibility: hidden;
}
.page .subpage .col-md-12,.col-lg-12{
float:left;
width:100%;
}
.page .subpage {
padding: 1cm;
border: 5px black solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
position:absolute;
}
.page {
visibility: visible;
}
}
Here's how the modal looks:
But this is how it looks on calling window.print() on button click:
What am I doing wrong here? Relative CSS newbie, have looked at a bunch of SO questions and other resources, but can't seem to figure this out.
UPDATE: I used z-index:9999 and width:140% to get the modal content(i.e. class="page") to cover the A4 page width. Don't think its the best solution, also can't get height to stretch the entire 297mm; height still as much as shown in second image. The 140% looks fine on a pdf saved through Chrome, is cutoff (understandably) in firefox and shows up as blank pdf in IE. Updated CSS:
#media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;}
Please try this
#media print{
body * {
visibility: hidden;
}
#page, #page * {
visibility: visible;
}
#page {
position: absolute;
top: 0;
left: 0;
}
}
I'd write a comment but I can't, so answer box it is. tl;dr, you need to provide more code or reproduce this issue in a place where we can see it.
I put your code into plain page with just a div with class page and nested a div with class subpage and there are some padding issues and the print view looks nothing like the web view.
Your min-height: 297mm; wasn't necessary and was adding extra space as it doesn't align with your height setting for .subpage.
Your position:absolute; squished your .subpage in print view.
But with those two tweaks, your css, with just simple divs in html, works about fine. I suspect something else on your page has conflicting dimensions, but again, without a reproduction on fiddle or something, we can't see it.
PS: I saw this other post from some time ago and there's a DEMO in there. It looks promising: CSS to set A4 paper size
I have updated an jsfiddle example to fit your needs
Here is css code
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background: yellow;
}
}
Here is html:
<div>
<button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>
<hr />
<div id="printSection">
<div id="printThis">
This should BE printed!
</div>
<div id="printThisToo">
This should BE printed, too!
</div>
</div>
and a javascript code to call print:
document.getElementById("btnPrint").onclick = function() {
window.print();
}
http://jsfiddle.net/95ezN/1459/
Related
There are a few other questions which are similar, but none works or seems in the right area. I'm trying to make a table's columns' widths resizable. My table is a normal HTML table, except that it has the Bootstrap 4 class table (maybe they could have thought of a different name...!).
My css looks like this:
.resizable-div {
resize: horizontal;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
The relevant bit of JS where I add the cell to the table row with a resizable div inside it, and text inside that, is like this:
row.appendChild(cell);
const resizableTdDiv = document.createElement( 'div' );
resizableTdDiv.classList.add( 'resizable-div');
cell.appendChild( resizableTdDiv );
const cellTextNode = document.createTextNode(isHeader ? fieldName : value);
resizableTdDiv.appendChild(cellTextNode);
The result works fine: resizable columns. Hurrah. There is only one fly in the ointment:
I can get rid of the borders, of course. I just want to lose those pesky handler triangles in the bottom right corners... all of them!
I realise users have to be given an idea that they are able to resize the columns... but I'd be perfectly happy to do that some other way if I could replace those triangle icons with 100% transparent ones (for example).
Edit
Here's a JSFiddle! Amazingly easy to do!
You can do this in WebKit based browsers currently with the ::-webkit-resizer pseudo element.
div{
overflow:auto;
resize:both;
width:50%;
}
div:nth-of-type(2)::-webkit-resizer{
background:transparent;
}
<div>
Not Hidden
</div>
<div>
Hidden
</div>
WebKit provides a pseudo-element for this ::-webkit-resizer and you can hide those triangles by applying display: none, -webkit-appearance: none, or background: transparent.
For Firefox or anything without WebKit an alternative / workaround would be to position a custom handle over top of each resizable div. This may require some different markup though.
.wrapper {
position: relative;
display: inline-block;
}
.resizable-div {
position: relative;
resize: both;
overflow: auto;
margin: 0px;
padding: 0px;
border: 1px solid black;
display:block;
min-width: 100px;
min-height: 30px;
}
.handle {
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: black;
pointer-events: none;
}
/* ::-webkit-resizer {
background: transparent;
} */
<div class="wrapper">
<div class="resizable-div"></div>
<div class="handle"></div>
</div>
The problem is I have 2 divs: one container a link and another a box shaped container. The link has a position:fixed; and it flies over the container div, so I tried to give the link a z-index with a negative value, turns out the
hover state does not work when applying z-index with a negative value for the anchor Unless I scroll the same amount of the height of the container div. So I scroll like 3 times and the hover state works again.
HTML
<div id="div-1">
<div class="container"></div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
</div>
CSS
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:0;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
an important thing is:
The container is hidden by Jquery, unless I click a certain button.
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
I have resorted to every possible (other ideas) I could think of. I tried to do the opposite meaning giving the container a z-index positive vales and leave the anchor, but that leaves the same problem
update
I will try to change the css property "z-index"but only when the the container button is toggled on
so the link will have z-index:-9; but only when the container is toggled to be viewed and when it is toggled back off the z-index will be removed or not applied.
I can't really figure how this will be written with jquery I tried this
$(document).ready(function(){
$(".container").hide();
$("#button-f").click(function(e){
$(".container").toggle();
$("#div-2 a").css("z-index", -9);
var target = $(e.target);
if (!target.is("##button-f")) {
$(".container").toggle();
}
});
});
this only result when I toggled the container on the z-index will be applied, but when i toggle it of it remains, how to remove the z-index or make it equal to z-inedx:99; when the container is toggled off?
Only any other answer for the problem is appreciated.
It's not clear what you want exactly, but the pics helped, although it appears that you want the link above the container, it looks as if you don't?
the whole purpose is to make the anchor in a lower index, so when the container is toggled on/ viewed, the link won't be setting on top of the container.
But you want the link to always react when hovered upon. So I assume that you can't figure out why it's not hovering when the container is open and you can still see the link, so logically you'd expect to at least be able to hover over the visible portion of the link.
It's not jQuery and it's not the .container. It's the .container's container A.K.A. #div-1. #div-1 width is always 100% and even if you didn't have that style, it would be 100% still because that's what blocks have if there isn't an explicit width assigned to it.
Solution: Give #div-1 a smaller width.
You have a fixed link yet no coords. You can't expect a fixed element to stand it's ground and behave like a fixed element if it doesn't know where to stand. Also if you have any positioned elements and you want interaction between other elements, make those elements positioned as well, div-1 is now position:relative and the z-index properties of the link and div-1 function correctly now.
Solution: Give #div-2 a top and left or right and bottom properties. Give #div-1 a position property so that the z-index functions properly.
All details are commented in the source.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#div-1 {
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
position: relative;
z-index: 1;
border: 1px solid red;
width: 200px;
/*Enable this and it will block link*/
/*width:100%;*/
height: 290px;
}
.container {
/* This saves you an unnecessary step in jQuery */
display: none;
width: 200px;
height: 290px;
background: orange;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
position: fixed;
font-weight: 500;
font-size: 1.09em;
text-align: center;
background-color: none;
text-decoration: none;
outline: none;
/* It's not clear whether you want the link above or
| below the container. If above, simply change to
| z-index: 2
*/
z-index: 0;
/* If you have a fixed element give it coords, otherwise
| it doesn't know where it should stand and behavior
| will be unexpected.
*/
top: 10%;
left: 125px;
}
#div-2 a:hover {
background: red;
color: white;
}
/* FLAG is just to test the accessibility of the link */
#FLAG {
display: none;
}
#FLAG:target {
display: block;
font-size: 48px;
color: red;
}
</style>
</head>
<body>
<button id='button-f'>F</button>
<div id="div-1">
<div class="container">Container is open</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
This is a link
<span id='FLAG'>This link is accessible now!</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
/* This is the jQuery you need to accomplish what you want.
| The rest was redundant and unnecessary.
*/
$(document).ready(function() {
$("#button-f").click(function(e) {
$(".container").toggle();
});
});
</script>
</body>
</html>
Have you tried assigning a z-index to #div-2?
You'll need to assign it a position to be able to give it a z-index. Try this:
#div-2 a{
width:13%;
height:auto;
padding:0.5em 2.3em;
display:block;
position:fixed;
font-weight:500;
font-size:1.09em;
text-align: center;
background-color: none;
text-decoration:none;
outline:none;
z-index:2;
}
#div-1{
width:100%;
height:290px;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
position: relative;
z-index:1;
}
I don't know what actually in your code but the js you provide look at the if section you have (##button-f) so we find an error here and do we actually need this line ??like we also don't need the line 'container'.hide() in JS. Now you have to scroll for the 'a' certain height because yous set height for #div-1 which is not hidden. So that's amount of height you have to scroll.
So What I change on your code
1. cut the height of div-1 and place it to .container class. you dont provide the a:hover class so I add that to and remove some unnecessary css you have. If you have any other Question ask me in comment LIVE ON FIDDLE
$(document).ready(function() {
$("#button-f").click(function() {
$(".container").toggle();
});
});
button {
width: 13%;
height: auto;
}
#div-1{
width:100%;
overflow-y:auto;
overflow-x: hidden;
box-sizing: border-box;
display: block;
}
.container {
height:290px;
display:none;
border: 1px solid red;
}
#div-2 a {
width: 13%;
height: auto;
padding: 0.5em 2.3em;
display: block;
positon:fixed;
float:right;
font-weight: 500;
font-size: 1.09em;
text-align: center;
text-decoration: none;
border-radius: 10px;
}
#div-2 a:hover {
background: black;
color: white;
}
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<body>
<button id="button-f">
button
</button>
<div id="div-1">
<div class="container">tagasdgasdgasdgas</div>
</div>
<!-- other divs like 5 or 6 of 'em -->
<div id="div-2">
<a href='#'>This is a link</a>
</div>
</body>
I have a problem with the size of the google maps map.
What I would like is to have 100% width of the map and div paragraph. See image:
It works on computers as you can see. But it's not responsive width, and that is the problem.
CSS:
#map_canvas { // the map
height:600px;width:800px;
}
.google_map {
position:relative;
float: left;
}
.paragraph { // text and stuff on the right
float: left;
padding-left:5px;
display: inline;
}
HTML
<div class="google_map">
<div id="panel">
<div ><input onclick="deleteMarkers();" type=button value="Rensa"></div>
</div>
<div id="facit"></div>
<div id="map_canvas"></div>
</div>
<div class="paragraph">
blablabla
</div>
If I change the width of map_canvas to 100% the result is ~100 px.
I tried to create a div that holds both map_canvas and paragraph with the width 100% and then to set width of the map to XX% but that again got interpreted as xx px.
Because the map is 800 px wide it becomes very hard to use on mobiles, I have no problem with map_canvas comes above paragraph on mobiles if that is a solution.
In short I need on computers the width to be say 800px and on mobiles 100%.
EDIT:
#map_canvas {
width:100%;
min-height:600px;
}
Becomes:
EDIT:
CSS panel
#panel {
position: absolute;
top: 10px;
left: 65%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;
}
#panel, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}
#panel select, #panel input, .panel select, .panel input {
font-size: 15px;
}
#panel select, .panel select {
width: 100%;
}
#panel i, .panel i {
font-size: 12px;
}
#panel2 {
position: absolute;
top: 10px;
left: 73%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;
}
#panel2, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}
#panel2 select, #panel2 input, .panel select, .panel input {
font-size: 15px;
}
#panel2 select, .panel select {
width: 100%;
}
#panel2 i, .panel i {
font-size: 12px;
}
Panel is the button you see on the image, Panel2 is a button that appears when you click once on the map, positioned to the right of the first button.
Try this:
#map_canvas {
width:100%;
min-height:600px;
}
Hope this help.
You could use CSS3 #media tags in your CSS. Including those you are able to set the width of your map according to the screen size of the device. Take a closer look to this site if you want to determine which device is used. You can define specific rules after which certain parts of your CSS are included or not, depending on the conditions you define in your file. After including this your css file could look like this:
#media (max-width: 800px) {
#map_canvas{
/*youre custom style for devices which have a maximum
screen size of 800px and therefore
can not display your map correctly*/
}
}
You can read more about this topic at this site.
Note that you can also include media tags in your <link> tag like this:
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 800px)" href="small-device.css" />
For more information you should take a closer look on this site.
Another way to determine which device is used is to use jQuery, JavaScript or PHP. Since current mobile device browsers should be able to use CSS3 I would recommend to use the media tags.
I would like to create a scrollable div. I know here is lots of example, but neither of them works for me.
I have a .page class, which fills my mobile's screen. Inside of it I have a .content div. This is contain the content of the pages. It is just align the content from the top, and it should have to scroll the content if it is going out of the .content's boundaries.
.page{
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
display: block;
}
.content{
padding: 4em 0 0 0;
overflow-x: hidden;
overlofw-y: auto;
/*-webkit-overflow-scrolling: touch;*/
}
What should I do to get it working?
Update
I tried it in fiddle, and it is worked. But not on my phone. Because of it I don't know where should be the problem.
Because of it I attached my whole code to the question. This is very important for me to get it working.
Please help me. Thanks for any help. :)
Is this what you need??
html, body{
height:100%;
margin:0;
padding:0;
}
.page{
margin: 0;
padding: 0;
height: 100%;
width: 50%;
display: block; border:solid #000 1px
}
.content{
padding:0;
overflow: scroll; overflow-x:hidden;
height:100%
/*-webkit-overflow-scrolling: touch;*/
}
span{
padding:4em 0 0 0;
display:inline-block
}
DEMO
Use span tag to specify the padding for content div coz if you give padding to the content div it calculates as additional height 100%+4em so..
And make sure that you are specifying html and body height as 100% whenever you want to use height:100% in your page.
You need to get window height for that and need to set it for .page. Anyway, you may need to add some javascript for that. I used jQuery for solution. [you can use other library, its up to you. I am suggesting you this solution]
Here is markup:
<div class="page">
<div class="content">
</div>
</div>
CSS:
* { margin:0; padding:0 } /* using * for demo _ you should use proper reset */
html, body { height:100%; height:100% }
body { height:5000px; background-color:#F7F7F7; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:1.6em }
.page { background:#A2A2A2; width:200px; height:600px; overflow-y:scroll; position:fixed }
.content { background-color:#4D4D4D; padding:10px; color:#B7B7B7; }
JS:
$('document').ready(function(){
var wHeight = $(window).height();
$('.page').css({
'height' : wHeight + 'px'
});
});
Just see this fiddle link - (live demo) - http://jsfiddle.net/LZT7B/
I have a web page that is wide (3078px) and pretty long too (1540px).
The page has a large div containing 6 divs inside it on 3 columns and two rows (each row a separate div itself).
When the page loads, it displays the top left div (box1) in the top right corner, with the option to scroll down or right to see the rest of the content.
I'd like to make it be centered on load, that is to say, I would like the middle column (box 2) to show in the middle of the page when loading, with the option to scroll left and right for the rest of the content.
Is there any script or CSS/HTML combo that would allow me to select what will be displayed in the browser on load? Essentially, what I'm trying to do is similar to centring the whole of the body within the browser window. I was considering attaching an anchor with a name to the middle div (box2), but I still wouldn't know the Javascript to make it select that div as the top left to load on.
Please let me know if this is a bit confusing, I can make a sketch to explain what I mean if that could help! (The jsfiddle link is below)
HERE IS THE CSS:
body {
margin:0px;
padding:0px;
text-align: center;
background:black;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:1024px;
height:768px;
background:transparent;
border:1px red solid;
}
#above {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#below {
margin:0px;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:770px;
background:transparent;
}
#mainbox {
margin: 0 auto;
padding:0px;
float:left;
display:inline-block;
width:3078px;
height:1540px;
background:transparent;
}
AND THE HTML:
<div id="mainbox">
<div id="above">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
<div id="below">
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
</div>
</div>
There is a JS fiddle too: http://jsfiddle.net/KyMet/
A similar question would be (to remove the pain of horizontal scrolling) – If I have a really long page, which scrolls vertically, how can I get it so that it loads with the bottom of the page in the browser window, so that, practically, you need to scroll up to see the rest of the content?
You need to use some query to pull this of.
EDIT
DEMO
$(function(){
//total width of your wrapper
var totalWidth = $('#mainbox').outerWidth(true);
//width of the user browser
var width = window.innerWidth;
//calculate the middle
var middle = (totalWidth - width) / 2
window.scrollTo( middle, 0 );
});
YOUR CSS
I would also recommend you to clean up your css, there is a lot of unnecessary properties there. You can choose to use this
body {
margin: 0 auto;
padding: 0;
text-align: center;
background: #222;
overflow: scroll;
}
#box1, #box2, #box3, #box4, #box5, #box6 {
margin: 0;
padding: 0;
float: left;
display: block;
width: 1024px;
height: 768px;
border: 1px red solid;
}
#box2 {
background-color: aqua; /* only for demo */
}
#above {
margin: 0px;
padding: 0px;
display: block;
}
#below {
margin: 0px;
padding: 0px;
display: block;
}
#mainbox {
padding: 0;
width: 3078px;
height: 770px;
}
/* For modern browsers */
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
*zoom:1;
}
You would have to use jQuery scrollto library
http://demos.flesler.com/jquery/scrollTo/