Print function alignment in angular - javascript

i am new in angular i want to print a modal information i am using onclick=print() to print the data my data is shown in the print priview but i didnt align right i add the screenshot of my pgae i want to align the data enter image description here.
my css code
#media print {
#non-printable {
visibility: hidden;
}
#printable{
visibility: visible;
border: none;
position: absolute !important;
left: 0;
top: 0;
overflow-x:auto ;
float: left;
}
}
this is my html code
<div class="modal" id="dModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document" >
<div class="modal-content" style="margin-left: auto; margin-right: auto;">
<div class="modal-body" id="printable">
<div class="container" style="width:100%" >
<div class="row">
<div class="col col-md-3">
<label>Irn Number :</label>
</div>
<div class="col col-md-9">
<label>{{irn}}</label>
</div>
</div>
<div class="row">
<div class="col col-md-3">
<label>Status :</label>
</div>
<div class="col col-md-7">
<label>{{Status}}</label>
</div>
</div>
<div class="row">
<div class="col col-md-3">
<label>QR code :</label>
</div>
<div class="col col-md-7" style="text-align: left;">
<label> <qrcode [qrdata]="qr" [width]="150" [errorCorrectionLevel]="'M'"></qrcode> </label>
</div>
</div>
</div>
<div class="modal-footer" id="non-printable">
<button id="btnPrint" type="button" class="btn btn-secondary" data-dismiss="modal"onclick="print()">Print</button>
</div>
</div>
</div>
</div>
</div>
thankyou for your help.


You can try to add to the container class the attributes flex-direction: column; display: flex;

Related

Align div to bottom of Bootstrap4 card-body

I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

Click events not working above the map

I have one leaflet map and 2 div section with some content.
<body>
<div class="row showEquipmentDetails" style="margin:10px;">
<button type="button" class="btn btn-primary" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<div id="map">
</div>
</body>
<script>
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
</script>
Am doing hide and show of 2 div section its placed on out side of the map. But I need to hide and show it above the map,so I wrote like this
<div id="map">
<div class="row" style="margin:10px;">
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" style="float:right"><i class="fa fa-bars"></i></button>
</div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="float:right;background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
</div>
But click events are not working on map. when I click on first button, map is getting zoomed .click events are not fired. why? How can I achieve it?any suggestion?Thanks!!

Map is not loading to me. But check whether this solution is working for you,
var mymap = L.map('map').setView([51.505, -0.09], 13);
$('.EquipmentContent').hide();
function showEquipmentDetails(){
$('.showEquipmentDetails').hide();
$('.EquipmentContent').show();
}
function hideEquipmentDetails(){
$('.showEquipmentDetails').show();
$('.EquipmentContent').hide();
}
#container {
width: 650px;
height: 350px;
position:relative
}
#map {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.EquipmentContent {
width: 90%;
height: 90%;
position: absolute;
top:8px;
left: 45px;
}
.showEquipmentDetails {
width: 40px;
height: 40px;
position: absolute;
top:8px;
left: 45px
}
#EquipmentContent {
z-index: 10;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<div id="container">
<div id="map"></div>
<div class="EquipmentContent row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style=";background:#dff0ff;">
<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2">
<label class="equipmentHeaderlable">Name</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-3 cl-md-3 col-lg-3">
<label class="equipmentHeaderlable">Speed</label>
<label class="equipmentHeaderValues">SSS</label>
</section>
<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
</section>
</div>
</div>
<button type="button" class="btn btn-primary showEquipmentDetails" onclick="showEquipmentDetails()" ><i class="fa fa-bars"></i></button>
</div>

Got solution.By adding the following style I am getting the expected result
.showEquipmentDetails,.EquipmentContent{
position:absolute;
z-index:9;
width:98%;
}

Onclick event not working properly

Basically I am trying to use an onclick event to change an image source when image 2 button is clicked. When the image furthest right of the section is clicked, a modal will pop up. In that modal, there are two buttons down at the bottom. Image one button is intended to display the original image, and image two is intended to display a different image. Not sure what is wrong in my code, I can't see anything that I am forgetting. Or maybe I am just doing it completely wrong in the first place, help would be much appreciated.
.mDialogPhoto {
width: 95%;
display: block;
margin-left: auto;
margin-right: auto;
}
.modal-body {
padding: 0px;
}
.modal-backdrop.in {
opacity: 0.8;
}
.modal-content {
background-color: white;
}
.img-responsiveModal {
margin-top: 20px;
margin-bottom: 20px;
display: block;
width: 100%;
height: auto;
}
.modal-dialog {
margin-top: 50px;
}
<section class="contentThree">
<div class="container-fluid custom">
<div class="row">
<div class="col-md-12 hidden-xs hidden-sm">
<h2 class="text-center photographyTitle">Shop</h2>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog mDialogPhoto" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 modal3ImgPrev">
<img class="img-responsiveModal" id="myImg" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/>
</div>
<div class="paypal col-md-3">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="D9FWAKHUPWYXS">
<table>
<tr><td><input type="hidden" name="on0" value="Choose Size">Choose Size</td></tr><tr><td><select class="float-right" name="os0">
<option value="Size One">Size One $100.00 USD</option>
<option value="Size Two">Size Two $200.00 USD</option>
<option value="Size Three">Size Three $300.00 USD</option>
<option value="Size Four">Size Four $400.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input class="paymentBtn1" type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
<div class="row">
<button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'">Image 1</button>
<button onclick="document.getElementById('myImg')src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'">Image 2</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal1"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/photoImage1-1.jpg'/></a>
</div>
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal2"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'/></a>
</div>
<div class="col-sm-8 col-sm-offset-2 col-md-offset-0 col-md-4 photoBG">
<a type="button" data-toggle="modal" data-target="#myModal3"><img class="img-responsive center-block" src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'/></a>
</div>
</div>
<div class="col-md-4 col-md-offset-4 hidden-xs hidden-sm">
<a class="btn defaultBtn btn-block" href="/videography#photography">View More</a>
</div>
<div class="col-sm-8 col-sm-offset-2 visible-xs visible-sm">
<a class="btn defaultBtn btn-block" href="/videography#photography">View Photos</a>
</div>
</div>
</div>
</section>

You need a dot before the src, its a property of the getElementById() method.
document.getElementById('myImg').src =
'/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg';

How to vertically AND horizontally align img inside div?

I know this has been asked many times but I've tried pretty much anything I've read so far.
I want to align both horizontally and vertically an img inside a div.
The container div is inside a modal showing the picture, once clicked its preview. Then it will contain pictures with any size.
I can align horizontally OR vertically but not both.
HTML code: https://pastebin.com/7dCQ1aJg
<div id="mypicmodal" class="col-lg-12 col-md-12 col-sm-12 content">
<div class="row content">
<div class="col-lg-1 col-md-1"></div>
<div class="col-lg-10 col-md-10 col-sm-12 content">
<div class="row content">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="col-lg-12 col-md-12 col-sm-12 modal-content">
<div class="row content">
<div id="modalpiccontainer" class="col-lg-8 col-md-8 col-sm-12 content" style="background-color:black">
<div class="row content">
<!-- pic here -->
<img id="pic" src="">
</div>
</div>
<div id="modalpicdata" class="col-lg-4 col-md-4 col-sm-12 content">
<div class="row content">
<div id="modaluserdata" class="col-lg-12">
<div class="row content">
<div id="modaluserpic" class="col-lg-3 col-md-3 col-sm-3 content" style="background-color:yellow">
</div>
<div id="modaluserpicinfo" class="col-lg-9 col-md-3 col-sm-3 content" style="backround-color:green">
</div>
</div>
</div>
<div id="modalsocial" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modalcomments" class="col-lg-12">
<div class="row content">
</div>
</div>
<div id="modaltypecomment" class="col-lg-12">
<div class="row content">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Modal example (with img not aligned vertically): https://ibb.co/j4nJ1Q
(.content only contains "height: inherit" and the modal is 550px)
Thank you!

Easy with Flexbox :
div.container{
width: 500px;
height: 400px;
border: red dashed 2px;
display: flex;
justify-content: center;
align-items : center;
}
<div class="container">
<img src="http://lorempixel.com/300/200/"/>
</div>

centered "row" content with Bootstrap

i have a problem to center the content in a "row", the buttons in the example are always on the left side and i have too much space on the right side.
Is there a way to center this buttons?
thx
tomas
<div class="abc">
<div class="row red show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>

The class span2 has property float:left:
<div class="block">
<div class="row show-grid">
<div class="span2 btn">a</div>
<div class="span2 btn">b</div>
<div class="span2 btn">c</div>
<div class="span2 btn">d</div>
<div class="span2 btn">e</div>
</div>
</div>
CSS:
.block {
max-width: 500px;
}
.block > div {
text-align:center;
}
.block > div > div {
float:none;
}
I would consider not using span2 (layout and grid class) with btn (button style class) together.

http://jsfiddle.net/sTwj7/10/
HTML
<div class="abc">
<div class="row red show-grid">
<div class="btn">a</div>
<div class="btn">b</div>
<div class="btn">c</div>
<div class="btn">d</div>
<div class="btn">e</div>
</div>
</div>
CSS
.red {
background-color: red;
}
.abc {
max-width: 500px;
}
.red .btn {
width: 160px;
margin: 0 auto;
display: block;
}

Updated 2018
Bootstrap 4
Use the auto-layout columns and text-center
<div class="row text-center">
<div class="col-sm border">a</div>
<div class="col-sm border">b</div>
<div class="col-sm border">c</div>
<div class="col-sm border">d</div>
<div class="col-sm border">e</div>
</div>
https://www.codeply.com/go/2fDFPSB5A4
Bootstrap 3
Use column offset and text-center
<div class="row red show-grid text-center">
<div class="col-md-2 col-md-offset-1 btn btn-default">a</div>
<div class="col-md-2 btn btn-default">b</div>
<div class="col-md-2 btn btn-default">c</div>
<div class="col-md-2 btn btn-default">d</div>
<div class="col-md-2 btn btn-default">e</div>
</div>
https://www.bootply.com/zEYom4EJUF
Bootstrap 2 (original answer)
You could add CSS to center your spans like this:
http://jsfiddle.net/sTwj7/9/
<div class="span2 pull-center">
<h1>a</h1>
</div>
CSS class:
.pull-center {text-align:center;margin:0 auto !important;float:none !important;}

Categories

Resources