I have the following dynaform created in js that has the following header:
document.getElementById("btnPrint1").onclick = function () {
printElement(document.getElementById("printThis1"));
}
function printElement(elem) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
console.log($printSection);
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}
var linha = ``;
linha += `<div class = "headd">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="img">
<img class="logo1 imag" src="./images/logo/logo.jpg" alt="">
</div>
<div><span class="logo2 título">xxxxx</span><span class="logo3 título">xxxxx</span></div>
<div class="logo4 dentro">xxxxxxx e xxxxxxxxx, lda.</div>
<div class="dentro" style="margin-top: 3%;">xxxx xxx xxxxxx, nº xxxx - xxxx-xxxx xxxx xxxx</div>
<div class="dentro">Tel. xxxx xxx xxxx</div>
<div class="dentro">xxxxxxxxxx#sapo.pt <span class="logo5 dentro">www.facebook.com/xxxxxxxxx</span></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 fix-div14" style="float: right;">
<div class="form-group col-md-4" style="float: right;">
<input type="text" class="form-control1 dentro" style="text-align: center;" value="1">
<span class="form-highlight"></span>
<span class="form-bar"></span>
<label class="label3 logo6 dentro" for="Orcamento">Orçamento Nº</label>
</div>
<div class="form-group col-md-4" style="float: right;">
<input type="text" class="form-control1 dentro" style="text-align: center;" value="2021-07-27">
<span class="form-highlight"></span>
<span class="form-bar"></span>
<label class="label3 logo7 dentro" for="Data">Aprovado</label>
</div>
</div>
<div style="float: right;" class="col-xs-4 col-sm-4 col-md-4 col-lg-4 fix-div15">
<div class="dentro">Nº Cliente: xx</div>
<div class="dentro">xxxxxxxxxxxxxx</div>
<div class="dentro">xxxxxxxxxxxxx</div>
<div class="dentro">xxxxxxx - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
<div class="dentro">xxxxxxxxx | xxxxxxxxxx</div>
</div>
<div style="margin-top: 3%; border-style: solid; border-bottom: 10px; border-right: 10px; border-left: 10px;"><div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 logo11" style="margin-top: 2%;">
<div class="form-group col-md-12 título" style="text-align: center;"><span>Serviço: Fonecimento de móveis</span></div>
</div>
</div>`;
$("#retorc6").html(linha);
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
margin: 2mm;
}
.headd {
padding : 20px 0 20px 0;
margin-bottom:20px;
border-bottom : 2px solid #0095c8;
}
p {
margin : 0;
}
.content11 {
width: 100%;
padding : 10px;
height : 70px;
border-bottom : 1px solid;
text-align : center;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<button type="button" class="btn btn-info show-side-btn" id="btnPrint1" data-show="show-side-navigation1" style="float:right;"><i class="fa fa-print" aria-hidden="true"></i></button>
<div style="clear:both;"></div>
<div id="printThis1" class="printThis1">
<form role="form" action="#!" id="retorc6">
</form>
</div>
I want this header to be kept if I print more than one page.
I'm using class="headd" to try to make the header repeat on every page. The css of this class I'm putting inside #media print to be called when I send it to print, but even so the header only appears on the first page I print and doesn't appear on the others.
Can anyone help repeat the header on every page that is printed?
I did it recently, you need to embed all your code into a table.
There you can define a <thead>, which will be repetead in every page: inside that you define an empty space, in order to place a fixed header, like the one used in this answer.
Related
how do i make image and image select and delete buttons reponsive
I want to remove the gap after delete button, any suggestion will be appreciated??
<div class="container mt-0">
<div class="row">
<div class="col-sm-12 col-md-3"><!--upload button-->
<span class=""></span>#wordInfo["SelectImage"]
</div>
<div class="col-sm-12 col-md-3 ms-md-5"><!--delete button-->
<button type="submit" class="btn btn-outline-primary float-lg-end mb-2 w-100 " id="#removeImageElementId" style="#(String.IsNullOrEmpty(Model.MenuForm.IMAGE_NAME) ? "display:none" : "")" onclick="javascript:removeImage('#(noImage)', '#imageElementId', '#hiddenElementId', '#removeImageElementId'); return false;"><span class=""></span>Delete image</button>
</div>
</div>
</div>
<div class="row mb-3 d-flex flex-column"><!---image-->
<div class="col-md-7 mt-3">
<img id="#imageElementId" class="img-fluid" alt="Responsive image" src="#(String.IsNullOrEmpty(Model.MenuForm.IMAGE_NAME) ? noImage : menuImagePath + Model.MenuForm.IMAGE_NAME)" onload="javascript:disiplayImage('#removeImageElementId', $(this).attr('src'),'#noImage') " />
<input type="hidden" id="#hiddenElementId" name="hdnImageName_1" value="#Model.MenuForm.IMAGE_NAME">
</div>
</div>
</div>
[![below is image][1]][1]
[1]: https://i.stack.imgur.com/uhJhl.png
Change your css as shown :
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
in your case:
#centre{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
replace centre with id of image in your html
I am working on a login split screen, and had it perfectly aligned with bootstrap:
It has been requested that the left side image change when the page reloads. I have found a way to do this with JavaScript, and worked it into my code, but it has made the images wonky. There is a space on the left side, an unnecessary scroll bar because the height is off as well, and the image is no longer responsive. Obviously I had to change the code to get the js to run, and the js runs perfectly, but now the layout is screwed up:
The css has stayed the same for both examples, but I feel I should share it anyways:
I have gotten so close, I just can't seem to figure out a way to fix the image. Any help would be greatly appreciated.
Here is the full code:
html:
<div class="container-fluid">
<div class="row no-gutter">
<!-- The image half -->
<div class="col-md-7 d-none d-md-flex bg-image">
<img id="myPicture" class="w-100">
</div>
<!-- The content half -->
<div class="col-md-5">
<div class="login d-flex align-items-center py-5">
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-7 mx-auto">
<h3 class="display-4">Student Login</h3>
<form action="index.html">
<div class="form-group mb-4">
<input id="inputStudentID" type="studentID" placeholder="Student ID"
required="required" autofocus=""class="form-control border-3 shadow-sm px-6">
</div>
<div class="form-group mb-4">
<input id="inputPassword" type="password" placeholder="Password"
required="required" class="form-control border-3 shadow-sm px-6">
</div>
<div class="custom-control custom-checkbox mb-4">
<input id="customCheck1" type="checkbox" checked class="custom-control-
input">
<label for="customCheck1" class="custom-control-label">Remember Me</label>
</div>
<button type="submit" style="margin-left: 1px"
class="btn btn-block text-uppercase mb-3 border-3 shadow-sm">Sign In</button>
<div class="text-center d-flex justify-content-between">
<p>Forgot Password?</p>
</div>
<div class="text-center d-flex justify-content-between">
<p>Need to <a href="https://my.ntc.edu/psp/csprod/?cmd=login">
Create Student Account?</a></p></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.login,
.image {
min-height: 100vh;
color: #999999;
font-family: "Roboto", sans-serif;
}
.bg-image {
background-size: cover;
background-position: center center;
}
p {
color: #999999;
}
a {
color: #4285f4;
}
a:hover {
text-decoration: none;
color: #0f459b;
}
.display-4 {
font-size: 40px;
color: #999999;
}
#inputStudentID,
#inputPassword {
padding: 25px 0 25px 12px;
}
.btn {
background-color: #4285f4;
color: white;
}
.btn:hover {
background-color: #0f459b;
color: white;
}
.has-error input[type="text"],
.has-error input[type="email"],
.has-error select {
border: 1px solid #a94442;
}
js:
<script type="text/javascript">
window.onload = choosePic;
var myPix = new Array("images/girls.png", "images/group.png",
"images/studentbw.png", "images/stairs.png",
"images/purple.png", "images/portrait.png");
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];
}
</script>
Kindly use class="img-responsive" in image tag...
Kindly use class="img-responsive" in image tag...
<img id="myPicture" class="img-responsive" />
This change is enough for your issue....
This change is enough for your issue....
I displayed a grid items in a div which is toggled to show and hide the items,
In desktop and tablets it is working good, but in mobile devices the items button click event is not working.
In desktop when i mouse over the grid item it will change its color to blue and cursor to pointer.
sample code of this grid is as follow
<div class="items_grid" style="width: 50%; float: right; height: 320px; overflow-x: hidden; overflow-y: auto; position: absolute; z-index: 10; top: 0px; right: 0px; border: 1px solid rgb(219, 219, 219); display: block;">
<div class="col-md-12 col-sm-12 col-xs-12 div_padding">
<div class="form-group col-md-12 col-sm-12 col-xs-12" style="background-color:#DADADA;color:#000000;border:1px solid #DADADA;">
<center><form class="form-inline" style="padding:0px;margin-bottom:1px;">
<select class="form-control" name="menucategory" onchange="getbycategory(this.value)">
<option value="0">--Select Category/All--</option>
<option value="1">ABC</option>
</select>
</form></center>
</div>
</div>
<div id="menu_items">
<div class="col-md-2 col-sm-3 col-xs-6 itm">
<button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('1527')">Comma Hoox Powerbank 6000</button>
</div>
<div class="col-md-2 col-sm-3 col-xs-6 itm">
<button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('4002')">Epay</button>
</div>
<div class="col-md-2 col-sm-3 col-xs-6 itm">
<button class="btn btn-primary itm_btn" id="itmname" onclick="insertitem('2')">Fees - 1st Installment</button>
</div>
<div class="row" style="background-color:#f5f5f5;">
<div class="col-md-12 col-sm-12" style="padding-top:2px;">
<div class="col-md-6 col-sm-6" id="p_page"><button class="btn btn-primary btn-block pagenation disable" onclick="pagination(,0)"> << </button></div>
<div class="col-md-6 col-sm-6" id="n_page"><button class="btn btn-primary btn-block pagenation" onclick="pagination(12,0)"> >> </button>
</div>
</div>
</div>
</div>
sample js
function insertitem(invcode)
{
if(invcode=='')
{
alert("no item");
}
else
{
//some function
}
}
Note: Never nest col within col and cols should always be inside rows.
By the way, placing
<div class="clearfix"></div>
after the last item should clear floats and fix this issue.
I have a panel heading and a panel body having a description by default when the page reloads. when I click on the + symbol then there are some contents to be displayed and that description to be removed.
everything is working fine. but when I slideup then the description is appeared but it appears suddenly with a kind of stroke.
I can do it using time unit but it adds fade-in effect to it. which i don't want.
$('.add_discount_plus_minus').on('click', function () {
if($(this).text() === "+" ) {
$(this).text("-");
$('.club_registration_plus_minus').text("+");
$('.settings_plus_minus').text("+");
$('.add_discount_one_line_description').hide();
$('.show_hide_add_discount_panel').slideDown();
} else {
$(this).text("+");
/*$(this).css('font-size' , '20px');*/
$('.show_hide_add_discount_panel').slideUp();
$('.add_discount_one_line_description').show();
}
})
.add_discount_plus_minus {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-100%);
font-size: 20px;
}
.show_hide_add_discount_panel {
display: none;
}
.set_padding_0 {
padding: 0 !important;
}
.set_margin_0 {
margin: 0 !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-default set_padding_0">
<div class="panel-heading text-left">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10">
<span>Add Discount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span>
</div>
</div>
</div>
<div class="panel-body ">
<div class="row set_margin_0">
<span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span>
</div>
<div class="show_hide_add_discount_panel ">
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
</div>
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
<div></div>
</div>
</div>
</div>
</div>
Here is JSFiddle
When you slide up the panel body then the description gets displayed suddenly.
How can i solve it?
Any help would b great.
Thank You.
You don't need to use timeout, it will be hard to match exactly the time it takes to slide. The slideUp() method has a callback function to call once the animation is complete, show your default content there
$('.show_hide_add_discount_panel').slideUp(function(){
$('.add_discount_one_line_description').show();
});
https://jsfiddle.net/hbxqsxjp/2/
Then you should try to add some timeout before you see the default content.
Fiddle : https://jsfiddle.net/qaeed/hbxqsxjp/1/
$('.add_discount_plus_minus').on('click', function () {
if($(this).text() === "+" ) {
$(this).text("-");
$('.club_registration_plus_minus').text("+");
$('.settings_plus_minus').text("+");
$('.add_discount_one_line_description').hide();
$('.show_hide_add_discount_panel').slideDown();
} else {
$(this).text("+");
/*$(this).css('font-size' , '20px');*/
$('.show_hide_add_discount_panel').slideUp();
setTimeout(function(){
$('.add_discount_one_line_description').show();
}, 1000);
}
})
.add_discount_plus_minus {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-100%);
font-size: 20px;
}
.show_hide_add_discount_panel {
display: none;
}
.set_padding_0 {
padding: 0 !important;
}
.set_margin_0 {
margin: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="panel panel-default set_padding_0">
<div class="panel-heading text-left">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-10">
<span>Add Discount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2">
<span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span>
</div>
</div>
</div>
<div class="panel-body ">
<div class="row set_margin_0">
<span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span>
</div>
<div class="show_hide_add_discount_panel ">
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
</div>
<div class="row margin_top_10 set_margin_0">
<span>Some contents to be displayed</span>
<div></div>
</div>
</div>
</div>
</div>
I have designed one form below the image. Now, I want to display full responsive image in a background of the form.
I tried to code but the image is displaying inside the form rather than displaying a form on full width and height image.
Where is my mistake?
HTML
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
<div class="form-group">
<label class="sr-only" for="f1-last-name">To</label>
<input type="text" name="f1-last-name" placeholder="To..." class="f1-last-name form-control" id="f1-last-name">
</div>
<div class="f1-buttons">
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
</form>
</div>
</div>
CSS
.formhold {
background: url(images/334.jpg);
background-size: cover;
}
form {
display: block;
margin: 0 auto;
}
You almost have the right idea.
I drew up a really quick code-pen mock up you can take a look at:
http://codepen.io/zsawaf/pen/vKRLAP
In summary your mistake was that you needed another container outside of the bootstrap columns that spans the entire page and holds a background image.
HTML:
<div class="container-fluid cover-img">
<div class="row">
<!-- whatever you want your form container to span -->
<div class="col-xs-offset-3 col-xs-6">
<div class="form-container">
<form>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</form>
</div>
</div>
</div>
</div>
SCSS:
.cover-img {
background-image: url(http://previews.123rf.com/images/9nong/9nong1404/9nong140400110/27534018-wood-chip-and-saw-dust-background-compressed-Stock-Photo.jpg);
background-position: center;
background-size: cover;
width: 100vw;
height: 100vh;
}
.form-container {
margin-top: 40px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 5px;
form {
margin: 20px 0;
input {
margin: 5px 0;
width: 100%;
height: 40px;
}
}
}
Like Sinan said, you need to give the form a width and height to match the image size.
I think you can take Sinan's code and combine it with this to expand the form's width and height to match the image size.
Let's say your image size is 1024x768, then:
form {
display: block;
margin: 0 auto;
width: 1024px;
height:768px;
}
You can do it like:
.formhold {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
background-image: url(images/334.jpg)
background-color: rgba(0, 0, 0, 0);
background-size: inherit;
background-position: 50% 50%;
background-repeat: no-repeat;
z-index: 9999;
}
So i'm not sure if that worked for you but the last example was. Adding a wrapper div around the form with the container-fluid class and applying the background to that:
.wrapper {
background: url(images/334.jpg) no-repeat;
background-position: top center;
background-size: 100% auto;
}
And the HTML:
<div class="wrapper container-fluid">
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3 form-box">
<div class="formhold">
<form role="form" action="" method="post" class="f1" >
<h3>Fill in the form to get Flight</h3>
<div class="f1-steps">
<div class="f1-progress">
<div class="f1-progress-line" data-now-value="16.66" data-number-of-steps="3" style="width: 16.66%;"></div>
</div>
<div class="f1-step active">
<div class="f1-step-icon"><i class="fa fa-user"></i></div>
<p>plan</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-key"></i></div>
<p>schedule</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>people</p>
</div>
<div class="f1-step">
<div class="f1-step-icon"><i class="fa fa-twitter"></i></div>
<p>about</p>
</div>
</div>
<fieldset>
<h4>I want to go:</h4>
<div class="form-group">
<label class="sr-only" for="f1-first-name">From</label>
<input type="text" name="f1-first-name" placeholder="From..." class="f1-first-name form-control" id="f1-first-name">
</div>
</div>
Here is the link to the latest jsFiddle.