I am trying to use jspdf to print div element into pdf. However its giving me margin error.I am not sure where I am going wrong. I have added margins but its coming in line bey line and is missing CSS which I have written. As requested I have added the HTML code as well.
Below is the js I have written
margins = {
top: 70,
bottom: 40,
left: 30,
width: 550
};
function genIdCards(){
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('id-card'),
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width// max width of content on PDF
},function(dispose) {
pdf.save('Test.pdf');
},
margins);
};
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<button onclick="genIdCards()">Generate PDF</button>
CSS
.id-card {
height: auto;
float: left;
background: #fff;
width: 500px;
margin: 40px;
border: 1px solid #7c0000;
}
.apeejay-school {
height: 97px;
width: 100%;
background: #7c0000;
}
.logo {
width: 20%;
height: auto;
float: left;
text-align: center;
}
.logo img {
margin-top: 8px;
}
.apeejay-school-content {
width: 75%;
height: auto;
float: left;
padding-left: 10px;
text-align: center;
}
below is the html
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<?php include_once("../header.php"); ?>
</head>
<!-- END HEAD -->
<body class="page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-content-white">
<div class="page-wrapper">
<?php include_once("../navbar.php"); ?>
<!-- BEGIN HEADER & CONTENT DIVIDER -->
<div class="clearfix">
</div>
<!-- END HEADER & CONTENT DIVIDER -->
<!-- BEGIN CONTAINER -->
<div class="page-container">
<?php include_once("../side_bar.php"); ?>
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<!-- BEGIN CONTENT BODY -->
<div class="page-content">
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
Student Management
<i class="fa fa-circle"></i>
</li>
<li>
<span>ID Cards</span>
</li>
</ul>
</div>
<?php include_once("../lcode.php");?>
<br><br>
<div class="row">
<div class="col-sm-3">
<label> Academic Year*</label>
<select id="acadyear" name="acadyr" class="form-control">
<option value="" selected="selected">--Please select--</option>
<?php fetch_acad_yr($conn);
?>
</select>
</div>
<div class="col-sm-3">
<label> Class</label>
<select id="acadclass" name="cclass" class="form-control">
<option value="" selected="selected">--Please select--</option>
<?php fetch_class($conn);
?>
</select>
</div>
<div class="col-sm-3">
<label>Section</label>
<select id="section" name="csec" class="form-control">
<option value="" selected="selected">--Please select--</option>
<?php fetch_section($conn);
?>
</select>
</div>
<div class="col-sm-3">
<button id="liststudents" type="submit" class="btn btn-primary" name="process" style="margin-top: 6%;"><span class="glyphicon glyphicon-ok"></span> Display List</button>
</div>
</div>
<br>
<button id="genId" type="submit" class="btn btn-success" onclick="genIdCards()"><span class="glyphicon glyphicon-ok"></span> Generate Id Cards</button>
<br><br><br>
<div class="row">
<div class="col-lg-6 col-xs-12 col-sm-12">
<div class="portlet light">
<div class="table-responsive">
<table id="liststu" class="table table-condensed table-hover">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>Student ID</th>
<th>Name</th>
<th>Class and Section</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-6 col-xs-12 col-sm-12">
<div id="id-card" class="id-card">
<div class="apeejay-school">
<div class="logo"><img src="logo.png" alt="apeejay School"></div>
<div class="apeejay-school-content">
<div class="apeejay-school-txt">
Apeejay School
</div>
<div class="school-location text-center">
college Road , Charkhi Dadri-127306
</div>
<div class="ph-fax text-center">Ph.:01250-222172, Fax : 01250-225172</div>
<div class="email-apeejay-school text-center">Email : skool.ms.chkd#ap.edu</div>
</div>
</div>
<div class="clearfix"></div>
<div class="student-information">
<div class="student-details">
<div name="idName" class="name">Atul Kumar</div>
<div class="student-details-txt">
<div class="category">F / Name :</div>
<div name="idFname" class="category-detail">O P Sharma</div>
</div>
<div class="student-details-txt">
<div class="category">Admin . No.:</div>
<div name="idAno" class="category-detail">001</div>
</div>
<div class="student-details-txt">
<div class="category">Class :</div>
<div name="idCls" class="category-detail"> VI</div>
</div>
<div class="student-details-txt">
<div class="category">House :</div>
<div name="idHouse" class="category-detail">Nayak</div>
</div>
<div class="student-details-txt">
<div class="category">Address :</div>
<div name="idAdd" class="category-detail">25/2 , Krishana Colony, <br>Bhiwani</div>
</div>
<div class="student-details-txt">
<div class="category">Phone No :</div>
<div name="idPhnum" class="category-detail">XXXXXXXXXXXXXXX </div>
</div>
</div>
<div class="student-bio">
<div name="idSession" class="session">2009-2010</div>
<div class="student-pic"><img id="<?php echo ASSETIMG_PATH ?>" class="student-pic" name="stuimg" alt="Student"></div>
<div class="sinature"></div>
<div class="principal">Principal Sign</div>
</div>
</div>
</div>
<!--
<div class="portlet light">
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
</div>
-->
</div>
</div>
</div>
</div>
<!-- END QUICK SIDEBAR -->
</div>
</div>
<!-- END CONTAINER -->
<?php include_once("../footer_text.php"); ?>
</div>
<div id="idhtml">
</div>
<div class="quick-nav-overlay"></div>
<?php include_once("../footer.php"); ?>
<script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/validation.js"></script>
<script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/stumgmt/jspdf.min.js"></script>
<script type="text/javascript" src="<?=ASSET_PATH?>assets/staff_js/stumgmt/icard.js"></script>
</body>
</html>
Move out the pdf.save() from function(dispose){}, below is the working one
margins = {
top: 70,
bottom: 40,
left: 30,
width: 550
};
function genIdCards() {
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('id-card'),
margins.left, // x coord
margins.top, {
// y coord
width: margins.width // max width of content on PDF
},
function(dispose) {
pdf.save('Test.pdf');
},
margins);
};
#id-card {
height: auto;
float: left;
background: #fff;
width: 500px;
margin: 40px;
border: 1px solid #7c0000;
}
.apeejay-school {
height: 97px;
width: 100%;
background: #7c0000;
}
.logo {
width: 20%;
height: auto;
float: left;
text-align: center;
}
.logo img {
margin-top: 8px;
}
.apeejay-school-content {
width: 75%;
height: auto;
float: left;
padding-left: 10px;
text-align: center;
}
<script src="https://unpkg.com/jspdf#latest/dist/jspdf.min.js"></script>
<div id='id-card'>
<div class="logo">
<img src="test.jpg">
</div>
<div class=".apeejay-school">
<div class="apeejay-school-content">
Some content for testSome content for testSome content for testSome content for testSome content for testSome content for testSome content for test
</div>
</div>
</div>
<button onclick="genIdCards()">Generate PDF</button>
I wrote for you the working solution. You do not have to change the position of pdf.save('Test.pdf');
var margins =
{
top: 70,
left: 30,
right: 30,
bottom: 40,
width: 550
};
function genIdCards()
{
var pdf = new jsPDF('p', 'pt', 'a4');
//pdf.setFontSize(18);
pdf.fromHTML(document.getElementById('idhtml'),
margins.left, // x coord
margins.top,
{
// y coord
width: margins.width // max width of content on PDF
},
function(dispose)
{
//headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
pdf.save('Test.pdf');
},
margins
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js" crossorigin="anonymous"></script>
<ul id="idhtml">
<li>Some text 1</li>
<li>Some text 2</li>
<li>Some text 3</li>
</ul>
<button onclick="genIdCards()">Generate PDF</button>
Edit:
After your question changing I have tried to find new solution for you. Unfortunatelly jsPDF does not support the CSS. Only simple HTML will be supported. But I wrote the new solution for you without CSS:
Please execute this snippet on codepen.io and see the PDF.
Related
I need a quick fix here, How do I make the element with sticky class actually sticky within the container but outside it's parent row as well. Can anyone suggest me any quick fixes with HTML css and javascript? Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Element</title>
<style>
.sticky{
position: sticky;
top: 120px;
height: 200vh;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="sticky">
<h1>Sticky element</h1>
</div>
</div>
<div class="col-lg-10">
</div>
</div>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-10">
</div>
</div>
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-10">
</div>
</div>
</div>
</body>
</html>
position: absolute is working for sticky, but sticky must be under the parent element (so in your case it must be exactly inside the container).
.row {
background: #CCC;
border-bottom: 1px solid black;
}
.sticky {
position: absolute;
}
.row>div {
padding: 40px;
}
.container {
margin-top: 40px;
margin-bottom: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="sticky">
<h1>Sticky element</h1>
</div>
<div class="row">
<div class="col-lg-2">
Cell 1
</div>
<div class="col-lg-10">
Cell 2
</div>
</div>
<div class="row">
<div class="col-lg-2">
Cell 3
</div>
<div class="col-lg-10">
Cell 4
</div>
</div>
<div class="row">
<div class="col-lg-2">
Cell 5
</div>
<div class="col-lg-10">
Cell 6
</div>
</div>
</div>
Comment if something is not correct.
I'm a beginner working on a project in the MEAN stack. I'm getting inconsistent HTML previews when I render it by itself and when I run it from the project.
What it's supposed to look like (when I preview it by itself):
imgur
and here's what it looks like when I build the project:
imgur
I'd like the partial view to sit under the header and fill the remaining space on the screen.
Here's my index.html
<!doctype html>
<html ng-app="angulobby">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="css/text" href="./stylesheets/style.css">
<script src="https://use.fontawesome.com/7222f42b52.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="./main.js"></script>
<script src="./services.js"></script>
<script src="./controllers.js"></script>
<base href="/">
</head>
<body data-ng-controller="IndexController">
<!-- HEADER AND NAVBAR -->
<div class="box">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AnguLobby Prototype</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> Login</li>
<li><i class="fa fa-comment"></i> Register</li>
<div ng-controller="logoutController">
<a ng-click='logout()' class="btn btn-default">Logout</a>
</div>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where the content will be injected -->
<div data-ng-view></div>
</div>
</div>
</body>
</html>
and here is the partial view home.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="../stylesheets/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script></script>
</body>
</html>
and finally styles.css
html, body{
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
#main {
background-color: aliceblue;
flex-grow: 1;
}
#ng-view {
height: 100%;
}
#container {
height: 100%;
width: 100%;
}
#left, #middle, #right {
height: 100%;
width: 33%;
}
#chat-container {
display: flex;
flex-direction: column;
background-color: lightblue;
height: 100%;
width: 100%;
}
#messages-box {
flex-grow: 1;
}
You have an HTML page in the div of another HTML page. The inner page is 100% height of the div (which is only as high as the content)
Just remove the html and body tags from the home.html partial. You may want to examine how you are including your js scripts as well...
<div id="container" class="container-fluid" data-ng-controller="homeController">
<div class="row">
<div id="left" class="col-md-3">
1 of 3
</div>
<div id="middle" class="col-md-3">
2 of 3
</div>
<div id="right" class="col-md-3">
<div class="container-fluid" id="chat-container">
<div id="messages-box">
<h1 id="room-name"></h1>
<div data-ng-repeat="message in messages track by $index">
<span> {{message}} </span>
</div>
</div>
<div>
<form data-ng-submit="sendMessage()">
<input class="col-sm-11" id="m" data-ng-model="text" autocomplete="off"/>
<button class="btn btn-sm btn-info col-sm-1">SEND</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="/socket.io/socket.io.js"></script>
I am trying to attach an image to an email as normal attachment (not as inline image), but on html DOM, Firebug finds two elements with xpath //input#type='file', because I have two buttons that allows me to add the image: Insert file and Attach foto, see screenshots attached. For some reason, the image is always added as inline file in the body of the message. I tried in different ways to identify uniquely the xpath of the Insert button, but the image is always added inline with text.
Can anybody suggest a solution?
insert as normal attachment :-
add image inline with the text :-
EDIT: html
<document>
<html>
<head>
<body class="globalnavigation" data-atip="inbox" data-application="inbox" data-l_iid="11">
<div class="CDB-global-header" role="navigation">
<div id="frameMod" class="globalnavigation" data-mailboxtotalsize="232159303" data-introduction="false" data-loginrequest="true" data-serverhost="cmpweb99" data-l_iid="12">
<div id="headerArea">
<div id="contentArea" class="advert wide">
<div id="frameScaleLeft" class=" wide">
<!-- <div id="tAdConatiner"> -->
<!-- TODO: put T-AD here -->
<!-- </div> -->
<div id="frameScaleRight" class=" wide">
<div id="frameClmRight">
<div id="contentHeader" class="borderBottom">
<div id="toolbar" data-atip="toolbar">
<div id="textLinkContainer" style="display: none;">
<div id="messagelist" class="listContainer isExtendedListView sortingEnabled" aria-label="Nachrichtenliste" title="Nachrichtenliste" data-l_iid="32" style="display: none;">
<div id="messageContainer" class="writeMailContainer" data-stat="" aria-label="E-Mail Schreiben - Ansicht" title="E-Mail Schreiben - Ansicht" data-atip="mailwriteview" data-priority="normal" data-editormode="html" data-msgidheader="" data-continuemsg="" data-forwardsmsgs="" data-inreplytomsgs="" data-folderid="" data-l_iid="341" data-rnd="};&a+?9x~wxa((#}~%xd6'ud#K==}<=|#%+u|?}F%t8l">
<form title="" onsubmit="return false" action="" name="writemail" method="post">
<div id="messageWrapper">
<div class="edge"/>
<script type="text/javascript"> var recipientsToTempArray = []; var recipientsCcTempArray = []; var recipientsBccTempArray = []; </script>
<div id="messageHeaderContainer">
<div id="attachmentContainer" class="empty" data-atip="attachment" data-l_iid="344">
<div id="messageBodyContainer" data-texttype="html" style="height: 385px;">
<div id="textAreaSpacerZone" data-l_mouse_cl="Mailwriteview::setFocusInBodyPart"/>
<div class="textAreaContainer" style="display: block;">
<div class="rte">
<div class="rteWrapper">
<div id="mceu_250" class="mce-tinymce mce-container mce-panel" role="application" tabindex="-1" hidefocus="1" style="visibility: hidden; border-width: 1px;">
<div id="rteToolbar" class="mce-container-body mce-stack-layout">
<div id="mceu_251" class="mce-toolbar-grp mce-container mce-panel mce-stack-layout-item mce-first" role="group" tabindex="-1" hidefocus="1" style="width: 800px;">
<div id="mceu_251-body" class="mce-container-body mce-stack-layout">
<div id="mceu_252" class="mce-container mce-toolbar mce-stack-layout-item mce-first mce-last" role="toolbar">
<div id="mceu_252-body" class="mce-container-body mce-flow-layout">
<div id="mceu_253" class="mce-container mce-flow-layout-item mce-first mce-btn-group" role="group">
<div id="mceu_254" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_255" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_256" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_257" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_258" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_259" class="mce-container mce-flow-layout-item mce-btn-group" role="group">
<div id="mceu_259-body" style="position: relative;">
<div id="mceu_248" class="mce-widget mce-btn mce-first mce-last" aria-labelledby="mceu_248" tabindex="-1" role="button" aria-label="Bild einfügen/ersetzen" style="z-index: 3;">
<div id="html5_1avbl0qhf1rdv73j1bq61bl1v2183_container" class="moxie-shim moxie-shim-html5 pluploadFix_mceu_248" style="position: absolute; top: 0px; left: 0px; width: 27px; height: 26px; overflow: hidden; z-index: 2;">
<input id="html5_1avbl0qhf1rdv73j1bq61bl1v2183" type="file" accept="" multiple="" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"/>
</div>
</div>
</div>
<div id="mceu_260" class="mce-container mce-flow-layout-item mce-last mce-btn-group" role="group">
</div>
</div>
</div>
</div>
<div id="mceu_261" class="mce-edit-area mce-container mce-panel mce-stack-layout-item mce-last" role="group" tabindex="-1" hidefocus="1" style="border-width: 1px 0px 0px;">
</div>
</div>
<textarea id="lisaRte" class="mceEditor" style="width: 100%; display: none;" name="elm1" aria-hidden="true"/>
<div class="rteplainwrapper" style="display: none;">
</div>
</div>
</div>
</div>
<textarea id="hideTextArea"/>
</div>
</form>
<dropcontainer id="dropcontainerAttachment" class="writemailDropContainer" data-droptarget="attachment">
<dropcontainer id="dropcontainerInline" class="writemailDropContainer" data-droptarget="inline">
</div>
<script id="scb_tsqxcpgd">var startrnd = function(){var x = $('#scb_tsqxcpgd');x.prev().attr('data-rnd', "};&a+?9x~wxa((#}~%xd6'ud#K==}<=|#%+u|?}F%t8l");};</script>
<script id="scb_wejvnkhf">var startrnd = function(){var x = $('#scb_wejvnkhf');x.prev().attr('data-rnd', "+a'c(sy_\"&'D|s9b'b\"J#'Aq5_Dc\"K=F2=#u4''`(s\"l");};</script>
<script id="scb_czexgqvs">var startrnd = function(){var x = $('#scb_czexgqvs');x.prev().attr('data-rnd', "+=}F'a9+\"&+A~vu&};}w|___6(u}~v`:}<y9}tE=%b&l");};</script>
<script id="scb_hjbdknzd">var startrnd = function(){var x = $('#scb_hjbdknzd');x.prev().attr('data-rnd', "6s&c2?'<2(#=}vgc$a4I4Kqv$v}a%?5(}%yC()ux|(_l");};</script>
<script id="scb_eikiadpj">var startrnd = function(){var x = $('#scb_eikiadpj');x.prev().attr('data-rnd', "~v4J5t5I+`+|'thF5=5H2)+B\"'+x|s#!*K##3;#t\"bxl");};</script>
<script id="scb_lmbatyry">var startrnd = function(){var x = $('#scb_lmbatyry');x.prev().attr('data-rnd', "*>Aw%s9I}(cb+t&`'>xd&_`+'`8J'>#=%%\"`};+:\";&l");};</script>
<script id="scb_iofvihaw">var startrnd = function(){var x = $('#scb_iofvihaw');x.prev().attr('data-rnd', "};&a2t5J2w#I'aca|=#;5;us4u5c*_E}#a`|5t|a*;*l");};</script>
<script id="scb_jzmlnflp">var startrnd = function(){var x = $('#scb_jzmlnflp');x.prev().attr('data-rnd', "'<+#%)*_2;5$$<+?}a<c}(Ab%_u?%>#t|v=_3&5a$v*l");};</script>
<script id="scb_yhhckzdy">var startrnd = function(){var x = $('#scb_yhhckzdy');x.prev().attr('data-rnd', "6'tJ5wy(}&`F#;5z}w9#'uye'`#:}s'B6)4I(v#s~'<l");};</script>
</div>
</div>
<div id="frameScaleRightBorder" class="wide">
<div id="frameScaler"/>
</div>
</div>
<div class="afs_ads" style="display: none;"/>
<a id="typeformHiddenLink" class="typeform-share" target="_blank" data-mode="2" href="https://t-online.typeform.com/"/>
<div id="lisaInfoBlock" style="display:none;">
<iframe id="EmetriqTracking" style="display: none;" src="/ZW1haWxiZXRh/em/html/stats/getrenderedemetriqcontent"/>
<div id="secureInfoFlyout" style="left: 515.483px; top: 267.65px; display: none;">
<div id="mceu_29" class="mce-widget mce-tooltip mce-tooltip-n" role="presentation" style="left: 476.883px; top: 379.633px; z-index: 131070; display: none;">
<div id="exposeMask" class="overlay-mask" style="position: absolute; top: 0px; left: 0px; width: 1696px; height: 734px; display: none; opacity: 0.5; z-index: 11035; background-color: rgb(0, 0, 0);"/>
<div class="menuWrapper medium " data-atip="toolbar::attachment" data-l_iid="359" style="left: 1028.35px; top: 170.117px; display: block;">
<table class="menuTable" tabindex="-1">
<tbody>
<tr id="attachmentFromPc" class="" aria-label="Vom Computer" title="Vom Computer" tabindex="0" data-atip="attachmentFromPc||C|A" data-itemid="attachmentFromPc" data-l_mouse_cl="Menu.Item::click" data-l_iid="356">
<td style="font-weight: normal; position: relative;">
<div class="iconContainer">
<div id="attachmentFromPc_caption" class="caption indented" style="position: relative; z-index: 1;">Vom Computer</div>
<div id="html5_1avbl0r2q1kbfkqv361hdcb788_container" class="moxie-shim moxie-shim-html5 pluploadFix_attachmentFromPc_caption" style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; overflow: hidden; z-index: 0;">
<input id="html5_1avbl0r2q1kbfkqv361hdcb788" class="" type="file" accept="" multiple="" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"/>
</div>
</td>
</tr>
<tr id="attachmentFromDlsi" class="" aria-label="Aus MagentaCLOUD" title="Aus MagentaCLOUD" tabindex="0" data-atip="attachmentFromDlsi||C|A" data-itemid="attachmentFromDlsi" data-l_mouse_cl="Menu.Item::click" data-l_iid="357">
<tr id="attachmentFromDropbox" class="" aria-label="Aus Dropbox" title="Aus Dropbox" tabindex="0" data-atip="attachmentFromDropbox||C|A" data-itemid="attachmentFromDropbox" data-l_mouse_cl="Menu.Item::click" data-l_iid="358">
</tbody>
</table>
</div>
</body>
</html>
</document>
To identify uniquely to Insert file use below cssSelector :-
tr#attachmentFromPc input[type = 'file']
From what is visible in the html in the first screenshot, try this
For the first one:
//tr[#id='attachmentFromPc']//input[#type='file']
For the second one:
//tr[#id='attachmentFromDlsi']//input[#type='file']
We might need to look at a larger section of the hierarchy to help with the issue. It's a little difficult to identify structure from the screenshots provided.
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.
I am trying to make login screen as shown in image .I am able to set background image , input field and buttons .But I am facing few issue
my input field width is taking whole width .
how to centre vertical align and horizontal align as show in image (input field ,logo ,button are on centre).
can we give button width same as input width as shown in image
here is my code
http://plnkr.co/edit/MeweflpWLXZ8b4KJolu3?p=preview
<div class="bg">
<div class="logo">
<img src="https://dl.dropboxusercontent.com/s/r4dxqfvctvm905t/akritiv_logo.png?dl=0">
</div>
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<i class=""><img class="username_icon" src="https://dl.dropboxusercontent.com/s/d2tug300juuvo9v/user.png?dl=0"></i>
<input class="user_inputfield" type="text" placeholder="Username">
</label>
</div>
<div class="list list-inset">
<label class="item item-input">
<i class=""><img class="password_icon" src="https://dl.dropboxusercontent.com/s/whly1alp6k2bkhe/password.png?dl=0"></i>
<input class="password_inputfield" type="password" placeholder="Password">
</label>
</div>
<div style="text-align:center;">
<button class="button button-calm" style="width:40%">
Login</button>
</div>
</div>
</div>
Working example: http://plnkr.co/edit/omDgW8KXGoaBBsOrFpXw?p=preview
Horizontal and vertical centering done using Ionic Grid System: http://www.gajotres.net/ionic-framework-series-14-grid-system/
HTML:
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Popover</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="bg">
<!-- <div class="row">
</div>-->
<div class="row" style="height: 33.3%;">
</div>
<div class="row row-center">
<div class="col-33"></div>
<div class="col-33 test">
<div class="logo">
<img src="https://dl.dropboxusercontent.com/s/r4dxqfvctvm905t/akritiv_logo.png?dl=0">
</div>
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<i class=""><img class="username_icon" src="https://dl.dropboxusercontent.com/s/d2tug300juuvo9v/user.png?dl=0"></i>
<input class="user_inputfield" type="text" placeholder="Username">
</label>
</div>
<div class="list list-inset">
<label class="item item-input">
<i class=""><img class="password_icon" src="https://dl.dropboxusercontent.com/s/whly1alp6k2bkhe/password.png?dl=0"></i>
<input class="password_inputfield" type="password" placeholder="Password">
</label>
</div>
<div style="text-align:center;">
<button class="button button-calm" style="width:95%;">
Login</button>
</div>
</div>
</div>
<div class="col-33"></div>
</div>
<div class="row row-bottom">
</div>
</body>
</html>
CSS:
/* Styles go here */
.bg {
width: 100%;
height: 100%;
background-image: url("https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0");
}
.username_icon {
width: 48px;
height: 48px;
}
.password_icon {
width: 48px;
height: 48px;
}
.user_inputfield,
.password_inputfield {
padding-left: 15px!important;
}
.logo img {
display: block;
height: 50px;
margin: 0 auto;
}