I am attempting to print a div that is formatted to fit on a letter sheet of paper.
In css, I have laid out this page to look like the following:
But, when I print, I get this
The div's on the right side are not printed on the right, but their outlines are there. Instead the text contained inside them is pushed to the next page.
I'm not really sure where I went wrong or what is happening.
Here is my code:
my style outside the "paperA4" div:
.paperA4 {
width: 8.5in;
height: 11in;
border: 1px solid white;
margin: auto;
padding-left: .5in;
padding-right: .5in;
padding-top: .5in;
padding-bottom: .5in;
}
Inside of my print div:
<div id="print">
<style>
.paperA4 {
width: 8.5in;
height: 11in;
border: 1px solid white;
margin: auto;
padding-left: .5in;
padding-right: .5in;
padding-top: .5in;
padding-bottom: .5in;
}
.card-shell {
width:100%;
height:2in;
border: 1px solid blue;
}
.in-card {
width:50%;
height:100%;
border: 1px solid red;
float: left;
}
</style>
<div class="paperA4">
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
<div class="card-shell">
<div class="in-card">
test
</div>
<div class="in-card">
test
</div>
</div>
</div>
</div>
My printing function:
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
you can try adding display:flex; like here:
.card-shell { width:100%; display:flex; height:2in; border: 1px solid blue; }
but keep in mind caniuse.com/#feat=flexbox
Related
I have divs on my page. There is div .rightColumnBar and .divAttributes
HTML
<div class="mainContent">
<div class="pageContent">
<form id="createLead" class="frmDiv clear" action="/leads/create_lead.html?lead_id=3287" name="createLead" method="post">
<div class="divEditLead sldf_columnsContainer">
<div id="hot_div">
<div id="errorBlock">
<div class="leftColumnBr">
<div class="centerColumnBr">
<div class="rightColumnBr">
</div>
<div class="createLeadButtons">
<input id="saveLeadBtn" class="bigButton redButton" name="save" value="Save" type="submit">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
<div id="specHeightIncreaser"></div>
</div>
CSS
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
How can I move (only for front, not insert as html element) rightColumnBr to divAttributes and set for divAttributes float property in left?
Thanks.
If you are aiming script, than you can do CSS changes and DOM manipulation this way:
$('.divAttributes').css({
'border-color': 'red'
}).after( $('.rightColumnBr') );
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 100px;
padding-top: 10px;
width: 280px;
}
.rightColumnBr {
float: left;
margin-top: 15px;
width: 377px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContent">
<div class="rightColumnBr">
RCB
</div>
<p>
Text
</p>
<div class="divAttributes frmDiv">
ATTR
</div>
</div>
Also on JSFiddle.
Is this what you want?
<div class="pageContent">
<form id="createLead" class="frmDiv clear">
<div class="divEditLead sldf_columnsContainer">
</div>
<div class="leftColumnBr">
</div>
<div class="centerColumnBr">
</div>
<div class="createLeadButtons">
</div>
</form>
</div>
<div class="divAttributes frmDiv">
</div>
<div class="rightColumnBr">
</div>
.divAttributes {
border: 1px solid #d1ddd4;
min-height: 200px;
padding-top: 0px;
width: 200px;
float:left;
}
.rightColumnBr {
border: 1px solid #d1ddd4;
float: left;
margin-top: 0px;
width:200px;
height:200px;
}
Also please go through jsfiddle link: https://jsfiddle.net/mayurdandekar/0soLrqv0/
I know there is a library called match-height.js that already does this for you but I'm trying to do it from scratch. I have row with 2 columns, the first one has a centered (horizontally and vertically) black square. The second column has a heading and a paragraph. I just want to match the heights of the columns with the class "about-wrapper".
HTML:
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
jQuery:
$(document).ready(function(){
$("#about-logo-wrapper").height = $("#about-text-wrapper").height;
});
You're using height() wrong. It's a function, not a property, and it takes a parameter when you want to use it to set height...
$(document).ready(function(){
$("#about-logo-wrapper").height($("#about-text-wrapper").height());
});
See the documentation for more info...
http://api.jquery.com/height/
I think you need first to check which height is greater: either left cell or right one:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ?
$("#about-text-wrapper").height() :
$("#about-logo-wrapper").height();
then set this height to about-wrapper
$(".about-wrapper").height(h);
Look at snippet in full page mode:
var h = $("#about-text-wrapper").height() > $("#about-logo-wrapper").height() ? $("#about-text-wrapper").height() : $("#about-logo-wrapper").height();
$(".about-wrapper").height(h);
#about-logo-wrapper {
display: flex;
justify-content: center;
padding: 0px;
margin-bottom: 50px;
border: 3px solid red;
}
#about-logo {
height: 200px;
width: 200px;
max-width: 300px;
background: black;
margin: 0px auto;
align-self: center;
}
#about-text-wrapper {
border: 3px solid green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="about-section">
<div class="row">
<div class="col-md-4 about-wrapper" id="about-logo-wrapper">
<div id="about-logo"></div>
</div>
<div class="col-md-8 about-wrapper" id="about-text-wrapper">
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
<h2 class="main-heading" id="about-heading"> ABOUT THE CEO </h2>
<p class="main-body" id="about-body">
Paragraph content goes here...
</p>
</div>
</div>
</div>
CSS:
I have a page where multiple div and within each div there is a option to click and toggle the information, I am able to create by defining different IDs of DIV but I think that can be done somehow dynamically, here is what I have created in JSFiddle
CSS
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
HTML
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
JQuery
$('#button1').click(function () {
$("#content1").slideToggle(200);
});
$('#button2').click(function () {
$("#content2").slideToggle(200);
});
Check this:
$('.boxwrap > a').click(function () {
$(this).next().slideToggle(200);
});
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
The previous answers rely on the fact that the DOM is going to remain the same and the next() element after the button will always be the content div.
For a more robust solution, I would add a class to the buttons in the boxwrap(i.e. .boxbtn) and a class to the content divs (i.e. boxcontent) and then I would do something like the following:
$('.boxbtn').click(function () {
$(this).closest('.boxwrap')..find('.boxcontent').slideToggle(200);
});
Try this way,
It's better to specify the element with it's parent on which you're calling a click event.
$('.boxwrap > a').click(function(){
$(this).next('div').slideToggle(200);
});
Here with 2 options
using relative attribute value
using finding relative don element
/*$('.toggle_link').click(function () {
$($(this).data('toggle')).slideToggle(200);
});
OR
*/
$('.toggle_link').click(function () {
$(this).parent().find('.noDisplay').slideToggle(200);
});
.boxwrap{float:left; width:200px; height:250px; border:1px solid #ccc; margin:0 5px 0 0; text-align:center; box-sizing:border-box; padding:10px;}
.boxwrap_inner{float:left; width:100%; background:#ddd; padding:5px 0; text-align:center;}
.noDisplay{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
<html>
<style type="text/css">
#news
{
position: relative;
box-shadow: 1px 4px 5px #aaa;
text-align: left;
padding: 5px;
line-height: 20px;
height: 235px;
background: white;
border: 1px solid #ccc;
border-radius: 15px;
background: #eee;
width: 280px;
float: right;
height: 250px;
overflow: hidden;
background-repeat: repeat;
padding: 3px;
border-radius: 15px;
}
</style>
<script type="text/javascript">
var delayTime=8
var marqueeSpeed=2
var pauseTime=1
var copySpeed=marqueeSpeed
var pauseSpeed=(pauseTime==0)? copySpeed: 0
var actualHeight=''
function ScrollMarquee()
{
if (parseInt(crossMarquee.style.top)>((actualHeight / 2)*(-1)+8))
crossMarquee.style.top=parseInt(crossMarquee.style.top)-copySpeed+"px"
else
crossMarquee.style.top=parseInt((marqueeheight - (actualHeight / 2)) / 2)+8 +"px"
}
function InitializeMarquee()
{
crossMarquee=document.getElementById("vmarquee")
crossMarquee.style.top=0
marqueeheight=document.getElementById("news").offsetHeight
actualHeight=crossMarquee.offsetHeight;
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1)
{
crossMarquee.style.height=marqueeheight+"px"
crossMarquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("ScrollMarquee()",30)', delayTime)
}
if (window.addEventListener)
window.addEventListener("load", InitializeMarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", InitializeMarquee)
else if (document.getElementById)
window.onload=InitializeMarquee
</script>
<div id="news" onMouseover="copySpeed=pauseSpeed" onMouseout="copySpeed=marqueeSpeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<div id="copy1">
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
<div id="copy2" >
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
</div>
</div>
<div id="news" onMouseover="copySpeed=pauseSpeed" onMouseout="copySpeed=marqueeSpeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<div id="copy1">
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
<div id="copy2" >
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
</div>
</div>
</html>
I used marquee tag for continueous scrolling but it not works.
Then I used javascript for continueous scrolling, it works but for 1 div.
script is run for 1 div only. I changed the another div id and save script
in another js file name but it not works ,please help me out
Marquee was depreciated in the latest versions of most modern browsers. Check out this guide for doing marquee really easily in CSS: http://www.hongkiat.com/blog/css-marquee/.
I have following code for table in angular. I want a vertical scroll bar only for table body (table rows excluding header) how can I do that?
Since All rows are generated by ng-repeat. I don't know how to add overflow style.
html:
<div class="nu-table">
<div class="nu-table-row nu-header">
<div class="nu-table-cell">A</div>
<div class="nu-table-cell" style="width: 33%">B</div>
<div class="nu-table-cell" style="width: 34%">C</div>
</div>
<div class="nu-table-row nu-striped pointer-cursor" ng-repeat=" map in mapList">
<div class="nu-table-cell" ng-bind="map.A"></div>
<div class="nu-table-cell">{{map.B}}</div>
<div class="nu-table-cell" ng-bind="map.C"></div>
</div>
</div>
Following is the CSS content:
.nu-border-table{
border: solid 1px #ccc;
}
.nu-border{
border: solid 1px #ccc;
}
.nu-table{
background-color: #fff;
padding: 5px;
overflow: scroll;
display: table;
table-layout: fixed;
width: 100%;
}
.nu-table-row{
display: table-row;
position: relative;
width: 100%;
}
.nu-table-row:hover{
background-color: #cee6fa;
}
.nu-table-row.nu-striped.selected{
background-color: #cee6fa;
}
.nu-table-row:last-child{
border-bottom: none;
}
.nu-margin{
margin:5px;
}
.nu-table-cell{
display: table-cell;
border-right: solid 1px #ccc;
border-top: solid 1px #ccc;
min-height: 2em;
padding-top: .3em;
position: relative;
word-wrap: break-word;
padding-left: 2px;
}
.nu-table-cell:last-child{
border-right: none;
}
.nu-striped:nth-child(even) {
background-color: #f9f9f9;
}
.nu-striped:nth-child(even):hover{
background-color: #cee6fa;
}
.nu-header {
background-color: #dedede;
border-bottom: solid 2px #bebebe;
font-weight: bold;
}
Try to add a div around the rows (not tested):
<div class="nu-table">
<div class="nu-table-row nu-header">
<div class="nu-table-cell">A</div>
<div class="nu-table-cell" style="width: 33%">B</div>
<div class="nu-table-cell" style="width: 34%">C</div>
</div>
<div class="nu-table-body">
<div class="nu-table-row nu-striped pointer-cursor" ng-repeat=" map in mapList">
<div class="nu-table-cell" ng-bind="map.A"></div>
<div class="nu-table-cell">{{map.B}}</div>
<div class="nu-table-cell" ng-bind="map.C"></div>
</div>
</div>
</div>
and css (set the height you want)
.nu-table-body {
overflow-y:auto;
max-height:500px;
}
You can place two div where 1st div (Header) will have transparent scroll bar and 2nd div will be have data with visible/auto scroll bar. Sample has angular code snippet for looping through the data.
Below code worked for me -
<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
<div class="row">
<div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
<div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
<div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
</div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
<div>
<div class="row" ng-repeat="row in rows">
<div class="col-lg-3 col-xs-3">{{row.col1}}</div>
<div class="col-lg-6 col-xs-6">{{row.col2}}</div>
<div class="col-lg-3 col-xs-3">{{row.col3}}</div>
</div>
</div>
</div>
Additional style to hide header scroll bar -
<style>
#transparentScrollbarDiv::-webkit-scrollbar {
width: inherit;
}
/* this targets the default scrollbar (compulsory) */
#transparentScrollbarDiv::-webkit-scrollbar-track {
background-color: transparent;
}
/* the new scrollbar will have a flat appearance with the set background color */
#transparentScrollbarDiv::-webkit-scrollbar-thumb {
background-color: transparent;
}
/* this will style the thumb, ignoring the track */
#transparentScrollbarDiv::-webkit-scrollbar-button {
background-color: transparent;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
#transparentScrollbarDiv::-webkit-scrollbar-corner {
background-color: transparent;
}
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>